How can I implement animations in Angular?

How can I implement animations in Angular?

You can implement animations in Angular using the Angular animations module. First, import BrowserAnimationsModule in your app module.

What are the key steps to create a simple fade-in effect?

To create a fade-in effect, define the animation in your component using the @Component decorator and use the trigger function.

Can you show me a code example for that?

Sure! Here's a simple example:

import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  animations: [
    trigger('fadeIn', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('500ms', style({ opacity: 1 }))
      ])
    ])
  ]
})

You can then use [@fadeIn] in your template.

What if I want to add a slide effect instead?

You can create a slide effect by defining a different animation trigger. Use translateX in the style to achieve the slide effect.