Angular way of doing javascript getById code

I’m working on a migration project from AngularJS to Angular8

where I came across this code

// get the pattern from SVG document and set the stroke color
 var patternElt = $scope.svgDocument.find("#striped");
 patternElt.css("fill", color);
 // apply the striped class to the element
 element.css("fill", "url(#striped)");
 $(zoneClassSelector, element).css("fill", "url(#striped)");

what the above code does is when an element is clicked, it gets a pattern element from an svg file (below) and adds a fill color to it, and then applies it on the clicked DOM element :

<defs>
    <pattern id="striped" 
        width="8" height="8" 
        patternUnits="userSpaceOnUse"
        patternTransform="rotate(45)">
        <rect width="4" height="8" transform="translate(0,0)"></rect>
    </pattern>
</defs>

In my case in Typescript code I have the following

click($event: MouseEvent) {

let clickedEl = $event.target;
// check if clicked element is not an svg element 
if (clickedEl instanceof SVGPolygonElement || clickedEl instanceof SVGPathElement || clickedEl instanceof SVGGElement) {
  this.renderer.setAttribute(clickedEl, "style", "fill:url(#striped);");
}

}

Note: the SVG file is loaded with its path (no SVG xml in the component view to reference)

How could I get the striped pattern element using Typscript to add a fill color to it before pass it to the renderer setAttribute