Multi tool use

Could not find elementById on mat-card-content

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?

1 Answer
1

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


AfterViewInit

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.