Open In App

Angular10 Trigger Animation

Last Updated : 09 Nov, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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 | definitions)

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.
  • definitions: Sets an animation definition 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



Similar Reads

Angular10 Animation animate() Function
In this article, we are going to see what is animate in Angular 10 and how to use it. The animate in Angular10 is used to define an animation step that combines styling information with timing information Syntax: animate(timings | styles) NgModule: Module used by animate is: animations Approach: Create the angular app to be usedIn app.module.ts imp
2 min read
Angular10 State Animation
In this article, we are going to see what is State in Angular 10 and how to use it. The State in Angular10 is used to create an animation trigger containing state and transition of the animation. Syntax: State(name, style, options) NgModule: Module used by State is: animations Approach: Create an angular app that need to be used.In app.module.ts, i
2 min read
Angular10 animation transition API
In this article, we are going to see what is transition in Angular 10 and how to use it. The transition in Angular10 is used to create a transition for the animation in which an element will go from one state to another. Syntax: transition (stateChangeExpr, steps, options) NgModule: Module used by transition is: animations Approach: Create the angu
2 min read
Angular10 animation Style API
In this article, we are going to see what is Style in Angular 10 and how to use it. The Style in Angular10 is used to create a key/value object containing CSS properties/styles that can be used for an animation state. Syntax: Style(tokens) NgModule: Module used by Style is: animations Approach: Create the angular app to be used.In app.module.ts imp
1 min read
Angular10 getLocaleWeekEndRange() Function
In this article, we are going to see what is getLocaleWeekEndRange in Angular 10 and how to use it. The getLocaleWeekEndRange is used to get the range of week days for the given locale. Syntax: getLocaleWeekEndRange(locale : string): [WeakDay, WeakDay] NgModule: Module used by getLocaleWeekEndRange is: CommonModule Approach: Create an angular app.I
2 min read
Angular10 NgPluralCase Directive
In this article, we are going to see what is NgPluralCase in Angular 10 and how to use it. The NgPluralCase in Angular10 is used to create a view that will be added or removed from the parent NgPlural when the given expression matches the plural expression. We can use the values to make the output plural or singular based on the conditions. Syntax:
2 min read
Angular10 getLocaleFirstDayOfWeek() Function
In this article, we are going to see what is getLocaleFirstDayOfWeek in Angular 10 and how to use it. The getLocaleFirstDayOfWeek is used to get the first day of the week for the given locale. Syntax: getLocaleFirstDayOfWeek(locale : string): WeekDay NgModule: Module used by FirstDayOfWeek is: CommonModule Approach: Create the angular app.In app.mo
2 min read
Angular10 getLocaleDayNames() Function
In this article, we are going to see what is getLocaleDayNames in Angular 10 and how to use it. The getLocaleDayNames is used to get days of the week for the given locale. Syntax: getLocaleDayNames( locale: string, formStyle: FormStyle, width: TranslationWidth ) NgModule: Module used by DayNames is: CommonModule Approach: Create the angular app to
2 min read
Angular10 percentPipe
In this article, we are going to see what is percentPipe in Angular 10 and how to use it. The percentPipe is used to Transform a number to a percentage string. Syntax: {{ value | percent [ : digitsInfo [ : locale ] ] }} NgModule: Module used by percentPipe is: CommonModule Approach: Create the angular app to be usedThere is no need for any import f
2 min read
Angular10 LowerCasePipe
In this article, we are going to see what is LowerCasePipe in Angular 10 and how to use it. The LowerCasePipe is used to Transforms all the text to lowercase. Syntax: {{ value | lowercase }} NgModule: Module used by LowercaseCasePipe is: CommonModule Approach: Create the angular app to be usedThere is no need for any import for the LowerCasePipe to
1 min read