Angular ngIf not displaying element when set to true

Issue

I want to use an ngIf statement to render some HTML code after a certain period of time. Simplified for easier reproducibility, my HTML looks like this:

<div *ngIf="reload===true">
  <p>Hello world</p>
</div>

and my Typescript, which sets the reload variable to true after two seconds, looks like this:

  reload: boolean;

  ngOnInit(): void {
    this.reload = false;

    setTimeout(
      function() {
        this.reload = true;
        console.log(this.reload)
       }, 2000);
  }

Console logging reload indicates that this variable is being set to true. However, the code does not render in the view. Any ideas why?

Solution

You need to assign this to new reference or use arrow function

Example: https://stackblitz.com/edit/angular-eanr3e-pwtjit?file=src%2Fapp%2Fapp.component.ts

Answered By - Divya Sakariya