Unable to detect Canvas tag inside ngfor iteration – Angular Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Unable to detect Canvas tag inside ngfor iteration – Angular without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I want to work with Canvas tag inside ngfor but every times it showing undefined or null. I tried in many ways but not worked. Please help me.

HTML:

<div class="col-sm-6 col-lg-4 pb-30 blog-parent" *ngFor="let item of blogList; let i = index;">
    <div class="blog-item">
        <a href="#">
            <div class="blog-item-figure">
                <canvas class="blog-canvas" id="canvas"></canvas>
            </div>
        </a>
    </div>
</div>

TS:
ngOnInit(): void {
    this.cropImage();
}
cropImage() {
    let canvas: any = document.getElementsByClassName("blog-canvas");
    for (let i = 0; i < this.blogList.length; i++) {
        console.log("canvas: ", canvas[i]);
    }

}

Answer

Replace ngOnInit() with ngAfterViewInit().

We are here to answer your question about Unable to detect Canvas tag inside ngfor iteration – Angular - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji