In my page, I have 4 steps using *ngIf to switch between each div, just like
<div *ngIf="step===1"></div>
<div *ngIf="step===2"></div>
<div *ngIf="step===3"></div>
<div *ngIf="step===4"></div>
And I have a canvas element in step 2 to render using data from step 1.
My problem was, when user click the next step button, I change step = 2, and I need to render canvas. But as we know, the canvas element won't exist until angular rendered UI.
So is there a way to get the canvas element after angular rendering?
Though I know [hidden] instead of *ngIf could do this, but is there a *ngIf way? setTimeout was not in my concern.
Not 100% sure this works, but worth a try:
<div *ngIf="...">
<canvas #canvas>
constructor(private cdRef:ChangeDetectorRef) {}
@ViewChild('cd') canvas:ElementRef;
step = 1;
nextStep() {
this.step++;
this.cdRef.detectChanges();
console.log(this.canvas.nativeElement);
}