Could not find elementById on mat-card-content

Issue

Having a canvas on the page is no problem to find it by id:

<canvas id="chart" width="400" height="400"></canvas>
document.getElementById("chart")

everything fine. but if i wrap it in a mat-card i could not find it anymore:

    <mat-card>
      <mat-card-title>My title</mat-card-title>
      <mat-card-subtitle>My sub title</mat-card-subtitle>
      <mat-card-content>
        <canvas id="chart" width="400" height="400"></canvas>
      </mat-card-content>
    </mat-card>

and this results with:

document.getElementById("chart")
null

any idea why?

Solution

Probably when you try to get it, it is not on the page. Components are javascript objects. So you need to get element after it loaded. I don't recommend the below solution. You should do it when component initialized.

Try this to validate my assumption:

setTimeout(() => {  
    console.log(document.getElementById("chart"))  
}, 5000); // 5 seconds to make sure  

Answered By - atilkan