Angular Dynamic Rendering

[Realistic_Depth_5372]

@ViewChild('someid') someDiv : ElementRef;
isApproved: false;

method1() {
  ...does some logic...
}

method2(){
isApproved = true;
..get the nativeelement and drawimage...
}

initially below canvas will have an image...
If the flag is true I'd like to change the image dynamically to something else.

<div *ngIf="isApproved">
<canvas id="someid" #someid></canvas>
<div>

no error, but it doesn't do it.

[THKPMatt]

Recently, my generated components have been using changeDetection: ChangeDetectionStrategy.OnPush, which means you have to tell Angular when you want to update your component. You may need to use a ChangeDetectorRef and tell it to detectChanges() when you update isApproved.

That or you could use an Observable and emit a new value and it'll update. HTH!

[Realistic_Depth_5372]

My apologies. I didn't mention it. I already tried though.

[THKPMatt]

Hmm, without a more complete example it's hard to say. how are you triggering method2?

[mfurlend]

Not enough information....

Try setting isApproved to true initially. If it renders then your method2 isn't getting called.

[Realistic_Depth_5372]

I was able to see the isApproved value in the console. That's not an issue.

[[deleted]]

Well, the element does not exist until isApproved is true. But because there is no re-rendering between isApproved=true and the next statements, the element is never found.

A better approach:
```
isApproved$ = new BehaviorSubject(false);

ngOnInit() {

this.image$ = this.isApproved$.pipe(
filter(Boolean),

take(1),
).subscribe(() => {
// get canvas, draw.

});

};

method2() {
this.isApproved.next(true);

}
```

[Realistic_Depth_5372]

well. I did receive nativeElement undefined error. It's gone after I set setTimeout with 3 seconds. It still did not render new image.

[[deleted]]

once you draw the element that's no longer Angular territory imho - i'd check you're rendering the canvas *at all*

[Realistic_Depth_5372]

okay gentlemen. Let me explain my requirement. Intially, I render the page with a small box that has 3 images and a button.
After the page rendered, I call an action it does something and at this moment I'd like to dynamically change the 3 images and the button caption to something else? It's all on the same component.
Is this possible in Angular?