Understanding Angular 8/9 Animations - Hello friend inabnomaniiyaha, In the article that you read this time with the title Understanding Angular 8/9 Animations, we have prepared this article well for you to read and take information in it. hopefully the contents of the post Artikel Angular,what we write you can understand. Alright, happy reading.

Judul : Understanding Angular 8/9 Animations
link : Understanding Angular 8/9 Animations

Understanding Angular 8/9 Animations

Angular 8/9 Animations will be covered in this tutorial. Thanks to the Web Angular animations API, Angular is fully equipped with its own DSL and powerful animation engine. This article is meant to be a detailed study of Angular 2+ animations. And we will need to come up with more posts to cover this topic more efficiently.

Demo: https://angular-7-animations.stackblitz.io/

Injecting BroswerAnimationsModule in Angular App

On top of it, in your app module, you will have to import the module named BroswerAnimationsModule.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({

  imports:      [ BrowserAnimationsModule ],

  declarations: [ ... ],

  bootstrap:    [ ... ]

})

export class AppModule { }

Importing Angular Animation services in the Components

Animations have their own package since Angular 4. You don’t have to depend on @angular/core anymore. So here is how your import statement will turn out:

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

Defining Angular Animations

As for the animation declarations in Angular, we keep them in the component metadata, as shown in the example below:

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

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

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css'],

  animations: [

    trigger('toggleBox', [

      // ...

      state('open', style({

        height: '200px',

        backgroundColor: '#061ff0'

      })),

      state('closed', style({

        height: '70px',

        backgroundColor: '#E91E63',

      })),

      transition('open => closed', [

        animate('.3s')

      ]),

      transition('closed => open', [

        animate('0.3s')

      ]),

    ])

  ]

})

export class AppComponent {

  isOpen;

  toggle() {

    this.isOpen = !this.isOpen;

    console.log(this.isOpen)

  }

}

Defining Template for Angular 2+ Animations

<button (click)="toggle()">{{isOpen ? 'Close Me' : 'Open Me'}}</button>

<div [@toggleBox]="isOpen ? 'open' : 'closed'" class="custom-style">

  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>

</div>

That's the article Understanding Angular 8/9 Animations

That's it for the article Understanding Angular 8/9 Animations this time, hopefully can be useful for all of you. well, see you in another article post.

You are now reading the article Understanding Angular 8/9 Animations with link addresshttps://inabnonapudyawanabing.blogspot.com/2020/08/understanding-angular-89-animations.html

Tweet