Challenge Overview:

In this challenge, you will explore Angular Material's animation features to build smooth and interactive animations for your Angular applications. You'll learn how to integrate Angular Material components, create custom animations, and make the user experience more engaging by applying animations to various UI elements such as buttons, cards, dialogs, and side menus.

Objective:

Set up Angular Material and animations in your Angular project.
Implement material design components with built-in animations.
Create custom animations using Angular's @angular/animations library.
Apply animations to improve user interactions, like opening/closing dialogs, buttons, etc.

Step 1: Set Up Angular Material and Animations

Before starting with animations, you need to integrate Angular Material and animations into your Angular project.

Install Angular Material:

Run the following command to add Angular Material to your project:
```
 ng add @angular/material
```
Choose a theme and set up global typography and animations during the setup.
Install Angular Animations:

If you didn’t already add the animations during the Angular Material setup, you can manually install them:
```
 npm install @angular/animations
```

Import Required Modules:

Open your app.module.ts file and import the necessary modules for Angular Material and animations.

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // Import Angular Animations
 import { MatButtonModule } from '@angular/material/button'; // For Material buttons
 import { MatCardModule } from '@angular/material/card'; // For Material cards
 import { MatDialogModule } from '@angular/material/dialog'; // For Material Dialogs
 import { AppComponent } from './app.component';

 @NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule, // Enable animations
     MatButtonModule,
     MatCardModule,
     MatDialogModule,
   ],
   providers: [],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

Step 2: Explore Built-in Angular Material Animations

Angular Material components come with built-in animations that enhance user experience. These animations include things like opening/closing dialogs, sliding in menus, or button ripple effects.

1. Material Button Ripple Effect

Angular Material buttons have a ripple effect by default. To see it in action, you can add a button to your component's HTML:

<button mat-raised-button color="primary">Click Me</button>

You should see a ripple effect when you click the button.

2. Material Dialog Animation

Material Dialogs come with built-in animations for opening and closing. You can use MatDialog to show a dialog and customize the animations.

Create a Dialog Component:

Generate a new component for the dialog:
```
 ng generate component dialog
```

Dialog Component HTML (dialog.component.html):

 <h2 mat-dialog-title>Dialog Example</h2>
 <mat-dialog-content>
   <p>This is an example dialog with an animation.</p>
 </mat-dialog-content>
 <mat-dialog-actions>
   <button mat-button mat-dialog-close>Close</button>
 </mat-dialog-actions>

Dialog Component TypeScript (dialog.component.ts):

 import { Component } from '@angular/core';

 @Component({
   selector: 'app-dialog',
   templateUrl: './dialog.component.html',
 })
 export class DialogComponent {}

Open Dialog in Main Component:

In your main component (app.component.ts), import and inject MatDialog to open the dialog.

 import { Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { DialogComponent } from './dialog/dialog.component';

 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
 })
 export class AppComponent {
   constructor(public dialog: MatDialog) {}

   openDialog(): void {
     this.dialog.open(DialogComponent);
   }
 }

Open Dialog in Main Component HTML (app.component.html):

Add a button to open the dialog:
```
 <button mat-raised-button (click)="openDialog()">Open Dialog</button>
```

Now, when you click the button, the dialog will open with a smooth transition animation.

Step 3: Implement Custom Animations

Angular provides a powerful @angular/animations library that allows you to create custom animations.

1. Create a Fade-In and Fade-Out Animation

Let’s create a simple fade-in and fade-out animation for a card. First, import trigger, transition, and animate from @angular/animations in your component.

Add Animation to Your Component (app.component.ts):

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

 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   animations: [
     trigger('fadeInOut', [
       transition(':enter', [
         style({ opacity: 0 }),
         animate('500ms', style({ opacity: 1 }))
       ]),
       transition(':leave', [
         animate('500ms', style({ opacity: 0 }))
       ])
     ])
   ]
 })
 export class AppComponent {}

Apply the Animation to an Element in the Template (app.component.html):

Now, use the @fadeInOut trigger in the template to apply the animation to a Material Card component:

 <div *ngIf="isVisible" [@fadeInOut]>
   <mat-card>
     <mat-card-header>
       <mat-card-title>Material Card with Animation</mat-card-title>
     </mat-card-header>
     <mat-card-content>
       <p>This card fades in and out.</p>
     </mat-card-content>
   </mat-card>
 </div>

 <button mat-raised-button (click)="isVisible = !isVisible">
   Toggle Card Visibility
 </button>

Add a Visibility Toggle (app.component.ts):

Add a property to toggle the visibility of the card.
```
 export class AppComponent {
   isVisible = true;
 }
```

Now, when you click the button, the card will fade in and out with a smooth animation.

Step 4: Apply Custom Animations to Material Components

You can also apply custom animations to Angular Material components like buttons, cards, side menus, and toolbars.

Create a sliding side menu that animates in and out.

Add a Side Menu to Your Template (app.component.html):

 <mat-drawer-container class="example-container">
   <mat-drawer mode="side" [(opened)]="sideMenuOpened" class="example-sidenav">
     <p>Side Menu Content</p>
   </mat-drawer>
   <mat-drawer-content>
     <button mat-raised-button (click)="sideMenuOpened = !sideMenuOpened">
       Toggle Side Menu
     </button>
   </mat-drawer-content>
 </mat-drawer-container>

Add Slide-In Animation in Component (app.component.ts):

For a smooth sliding effect, you can use Angular's built-in @angular/animations with @slideInOut trigger:

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

 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   animations: [
     trigger('slideInOut', [
       transition(':enter', [
         style({ transform: 'translateX(-100%)' }),
         animate('300ms ease-out', style({ transform: 'translateX(0)' }))
       ]),
       transition(':leave', [
         animate('300ms ease-in', style({ transform: 'translateX(-100%)' }))
       ])
     ])
   ]
 })
 export class AppComponent {
   sideMenuOpened = false;
 }

Step 5: Bonus Challenge – Complex Animations

Implement Route Transition Animations: Animate the transition between routes using Angular's @angular/animations library. Use router-outlet with @trigger to animate route changes.
Use Complex Animation Timelines: Create more complex animations using keyframes, timings, and choreographed animations that interact with each other.

Conclusion

By completing this challenge, you will gain hands-on experience with Angular Material and animations. You'll learn how to create interactive user interfaces that are more engaging by utilizing Angular Material’s built-in animations and implementing custom animations for different components.

Requirements to Submit:

Angular application with Angular Material animations enabled.
Implement custom animations like fade-in/fade-out and slide-in/slide-out.
Working example with Material components (dialogs, side menus, buttons, etc.).
Bonus challenge: Use complex animations like route transitions or keyframe-based animations.

Good luck, and happy coding! 🚀

Day 25 Angular Material Animations Challenge