Skip to content
Related Articles

Related Articles

Improve Article

Angular10 State Animation

  • Last Updated : 02 Jun, 2021
Geek Week

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, import BrowserAnimationsModule.
  • In app.component.html, make a div that will contain the animation element.
  • In app.component.ts, import the trigger, state, style, transition, animate that to be used.
  • Make the state containing name and style for the animation.
  • Serve the angular app using ng serve to see the output.

Parameters:

  • Name: Sets an identifying string.
  • styles: A set of CSS style associated with the state.
  • options: Parameters that can be passed to the state when it is invoked.

Return Value:

  • AnimationStateMetadata: An object that encapsulates the new state 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 { 
  // State 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('geek',[
  
      // State is used here      
      state('clr', style({
        'background-color': '#91fff4',
        transform: 'translateX(0)'
      })),
  
      // State is used here
      state('clr1', style({
        'background-color': '#7356a8',
        transform: 'translateX(100px)'
      })),
      transition('clr => clr1',animate(1200)),
      transition('clr1 => clr',animate(1000))
    ])
  ]
})
export class AppComponent  {
  state = 'clr';
  anim(){
    this.state == 'clr'
    this.state = 'clr1' : this.state = 'clr';
  }
}

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/state




My Personal Notes arrow_drop_up
Recommended Articles
Page :