Angular: Animate with *ngIf/*ngFor

Better display with most-used Angular *ngIf/*ngFor

Photo by noor Younis on Unsplash

The best way to have animation is to use CSS.

However there are also limitations with CSS animation especially;

• When you hide an element using display:none
• When you destroy an element using *ngIf and *ngFor

To overcome limitations of ideal CSS animation, Angular provide its own animation without using any 3rd party library, https://angular.io/guide/animations

Using Angular animation, it’s possible to have your own animation for the most-used structural directives such as *ngIf and *ngFor .

Here are the steps to make it.

Step 1: Import BrowserAnimationsModule to app.module.ts
Step 2: Create a application-wide sharable animation called app.animation.ts
Step 3: Import and define animation to app.component.ts
Step 4: Apply the animation to app.component.html

Step 1. Import BrowserAnimationsModule to app.module.ts