Unlock the power of Angular ViewChildren to access and manipulate SVG elements efficiently

Question

Unlock the power of Angular ViewChildren to access and manipulate SVG elements efficiently

I have an SVG file loaded as an object:

<object data="assets/img/states.svg" type="image/svg+xml" id="map"></object>

This SVG includes a large PNG map along with several rect and text elements.

<rect
     y="224.72084"
     x="644.87109"
     height="231.68137"
     width="101.08391"
     id="RECT_TO_GET" />

I want to store all the rect elements in an array, similar to how I do it with regular HTML elements using Angular's @ViewChildren:

@ViewChildren('rect') rects !: QueryList<any>;
this.rects.forEach(r=> {
            console.log(r);
        });

The issue is that the rects array always remains empty. I've attempted to access them in both ngViewInit() and ngAfterViewChecked() without any luck. How can I retrieve elements from an SVG?

I haven't tried using getElementsById() yet, as I prefer to handle it the Angular way if possible.

The main goal here is to assign specific colors to each rect element based on their context once retrieved.

angular typescript dom svg

Answer 1

Answer №1

ViewChild and ViewChildren do not have the capability to support CSS selectors.

Check out this link for more information on ViewChild

The supported selectors include:

any class with the @Component or @Directive decorator

a template reference variable as a string (e.g. query with @ViewChild('cmp'))

any provider defined in the child component tree of the current component (e.g. @ViewChild(SomeService) someService: SomeService)

any provider defined through a string token (e.g. @ViewChild('someToken') someTokenVal: any)

a TemplateRef (e.g. query with @ViewChild(TemplateRef) template;)

You are able to retrieve the HtmlElement from a template reference variable and then proceed to manipulate it after the Object Element Resource has Loaded.

Here is an online example for reference

HTML

<object #mySvg data="./assets/new.svg" type="image/svg+xml" id="map"></object>

Component

@ViewChild('mySvg') mySvg;

  ngOnInit() {
      const objElm = (this.mySvg.nativeElement as HTMLObjectElement);
    objElm.onload = () => {
        const paths = objElm.contentDocument.querySelectorAll('path');

        paths.forEach((path,index) => {
          console.log(`path:${index} , d=${path.getAttribute("d")}`);
        })

    }    
  }

Answer 2

ViewChild and ViewChildren do not have the capability to support CSS selectors.

Check out this link for more information on ViewChild

The supported selectors include:

any class with the @Component or @Directive decorator

a template reference variable as a string (e.g. query with @ViewChild('cmp'))

any provider defined in the child component tree of the current component (e.g. @ViewChild(SomeService) someService: SomeService)

any provider defined through a string token (e.g. @ViewChild('someToken') someTokenVal: any)

a TemplateRef (e.g. query with @ViewChild(TemplateRef) template;)

You are able to retrieve the HtmlElement from a template reference variable and then proceed to manipulate it after the Object Element Resource has Loaded.

Here is an online example for reference

HTML

<object #mySvg data="./assets/new.svg" type="image/svg+xml" id="map"></object>

Component

@ViewChild('mySvg') mySvg;

  ngOnInit() {
      const objElm = (this.mySvg.nativeElement as HTMLObjectElement);
    objElm.onload = () => {
        const paths = objElm.contentDocument.querySelectorAll('path');

        paths.forEach((path,index) => {
          console.log(`path:${index} , d=${path.getAttribute("d")}`);
        })

    }    
  }

Answer 3

Answer №2

I wanted to contribute a small addition to the response provided by @Chunbin Li (I currently lack the reputation to comment, unfortunately). In the discussion, @Perrier noted that this.rects remains an empty nodes list. This issue can be resolved by employing a different lifecycle method.

When utilizing ViewChild, it is recommended to make use of the lifecycle method ngAfterViewInit(). As per @Chunbin Li's explanation, the function is being called in ngOnInit(), which likely means that the SVG has not been completely rendered yet. By moving the function call to ngAfterViewInit(), sufficient time will be given for the DOM to render the SVG entirely, thus making the SVG properties accessible.

For more information, refer to the angular documentation on ViewChild.

Answer 4

I wanted to contribute a small addition to the response provided by @Chunbin Li (I currently lack the reputation to comment, unfortunately). In the discussion, @Perrier noted that this.rects remains an empty nodes list. This issue can be resolved by employing a different lifecycle method.

When utilizing ViewChild, it is recommended to make use of the lifecycle method ngAfterViewInit(). As per @Chunbin Li's explanation, the function is being called in ngOnInit(), which likely means that the SVG has not been completely rendered yet. By moving the function call to ngAfterViewInit(), sufficient time will be given for the DOM to render the SVG entirely, thus making the SVG properties accessible.

For more information, refer to the angular documentation on ViewChild.

Answer 5

Answer №3

After conducting further investigation, I was able to uncover the solution provided below. What's interesting is that this code resides within the ngAfterViewInit method of my Angular component and still requires the window.onload event listener to function properly. Why is that necessary?

window.addEventListener("load", function() {
    var svgObject = document.getElementById('map').contentDocument;
    var svg = svgObject.getElementById('svg48152');
    console.log(svg);
    const rects = svg.querySelectorAll('rect');
    console.log(rects);
    rects.forEach(r => {
        console.log(r);
    });
});

The crucial elements here are the contentDocument property and the onload event listener. For future reference, some helpful information can be found at: Using JavaScript with SVG

Answer 6

After conducting further investigation, I was able to uncover the solution provided below. What's interesting is that this code resides within the ngAfterViewInit method of my Angular component and still requires the window.onload event listener to function properly. Why is that necessary?

window.addEventListener("load", function() {
    var svgObject = document.getElementById('map').contentDocument;
    var svg = svgObject.getElementById('svg48152');
    console.log(svg);
    const rects = svg.querySelectorAll('rect');
    console.log(rects);
    rects.forEach(r => {
        console.log(r);
    });
});

The crucial elements here are the contentDocument property and the onload event listener. For future reference, some helpful information can be found at: Using JavaScript with SVG

Unlock the power of Angular ViewChildren to access and manipulate SVG elements efficiently

Answer №1

Answer №2

Answer №3

Similar questions

The router's handler function sends back a collection of objects, but for some reason, the client is not receiving them in JSON format even though the response

The TS2339 error has occurred because the "email" property cannot be found on the specified "Object" type

Comprehensive compilation of Typescript error codes along with solutions

When a link containing an ID hash in the URL is opened in a new tab, the ID within the link

The variance in module types within the tsconfig.json file

The Glyphicon is failing to display on the template

Creating Dynamic HTML/DOM in Angular 14: A Guide for Adding New Items to a List

Testing Angular Components Using HostListener

How can Angular components that are not directly related subscribe to and receive changes using a declarative approach?

How to Share Angular Modules Between Two Projects with Ivy Compilation Necessity

The Angular HttpClient Service will exclusively provide responses that have a status code of 200

Is it possible to incorporate shadows on a pie chart using recharts?

Ways to determine the presence of a value in an array

What is the best way to generate a box when a button is pushed?

Sharing Information Across Angular Routes

Translate language in an Angular file using TypeScript

displaying a pair of inputs next to each other

"Utilizing Primeng's P-Table Component for Enhanced Interactivity

Concealing the sidebar in React with the help of Ant Design

The error message 'ReferenceError: MouseEvent is not defined' indicates that