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

1 Like

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"

1 Like

I’ll try and let you know.

Thank you for your answers.