[SOLVED] How to blur the div after 2 seconds using Angular 12 and Typescript?

Issue

I am trying to add the blur class for div after 2 seconds. after that I have to display some values to that div. I don’t know how to do this in angular and typescript. Any suggestion?

Solution

Use [ngClass] in order to dynamically add a class depending of the value of a variable :

<!-- Dynamically add the class "blurred" on the element if isBlurred is true -->

<div [ngClass]="{ blurred: isBlurred }">Lorem ipsum</div>

More about NgClass : here

Then, in Typescript, use a setTimeout :

isBlurred = false;
[...]

setTimeout(() => this.isBlurred = true, 2000);

Then, express your creativity in CSS :p

.blurred {
  filter: blur(2px);
}

See StackBlitz here

Answered By – Arnaud Denoyelle

Answer Checked By – Mildred Charles (BugsFixing Admin)