How do I show a DIV after 4 seconds?

In my html page I have a DIV inicialiced hidden:

<div [hidden]=“val>0”>

When run constructor, I define val=10, then the DIV is hidden.

then with a timer (after 4000ms) I change val to -1, so, the DIV should show, but notthing append.

startTimer(){
setTimeout(function(){
this.val=-1;
console.log(‘show!!’);
},4000)
}

In the console i can see ‘show!!’ writen, but the DIV still hidden.

What am I doing wrong?

Thanks!

I prefere *ngIf and why do you not use a boolean for that functionality

Typing the word “function” inside the body of one.

javascript setTimeout executes the function with this pointing to the global object, You need to use ArrowFunction ()=> to preserve this context within setTimeout .

import { timer } from 'rxjs';

val = 10; // Before Constructor

timer(4000).subscribe(() => (this.val = -1)); // In Constructor

and in html;

*ngIf="val > 0"

I’ll try and let you know.

Thank you for your answers.