Skip to content
Related Articles

Related Articles

Angular10 Trigger Animation

View Discussion
Improve Article
Save Article
  • Last Updated : 02 Jun, 2021
View Discussion
Improve Article
Save Article

In this article, we are going to see what is trigger in Angular 10 and how to use it.

The trigger in Angular10 is used to create an animation trigger containing state and transition of the animation.

Syntax:

animate(name | definations)

NgModule: Module used by trigger is:

  • animations

 

Approach: 

  • Create an angular app that to be used.
  • In app.module.ts, import BrowserAnimationsModule.
  • In app.component.html, make a div which will contain the animation element.
  • In app.component.ts, import the trigger, state, style, transition, animate to be used.
  • Make the trigger containing state and transition for the animation.
  • Serve the angular app using ng serve to see the output.

Parameters:

  • Name: Sets an identifying string.
  • definations: Sets an animation defination object.

Return Value:

  • AnimationTriggerMetadata: An object that encapsulates the trigger data.

Example:

app.module.ts




import { LOCALE_ID, NgModule } 
from '@angular/core';
  
import { BrowserModule }
from '@angular/platform-browser';
import {BrowserAnimationsModule} 
from '@angular/platform-browser/animations';
import { AppRoutingModule }
from './app-routing.module';
import { AppComponent }
from './app.component';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [
      { provide: LOCALE_ID, useValue: 'en-GB' },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts




import { 
  // Trigger is imported here
  trigger, 
  state, 
  style, 
  transition, 
  animate } from '@angular/animations';
import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
  
    // Trigger is used here
    trigger('geek',[
      state('green', style({
        'background-color': 'green',
        transform: 'translateX(0)'
      })),
      state('blu', style({
        'background-color': '#49eb34',
        transform: 'translateX(0)'
      })),
      transition('green => blu',animate(1200)),
      transition('blu => green',animate(1000))
    ])
  ]
})
export class AppComponent  {
  state = 'green';
  anim(){
    this.state == 'green' ?
    this.state = 'blu' : this.state = 'green';
  }
}

app.component.html




<h1>GeeksforGeeks</h1>
<button (click)='anim()'>Animate</button>
<br>
<br>
<div 
  style="width: 150px; height: 100px; border-radius: 5px;"
  [@geek]='state'>
</div>

Output:

Reference: https://angular.io/api/animations/trigger


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!