Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

Angular10 animation Style API

  • Last Updated : 01 Sep, 2021

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 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 style containing tokens for the animation.
  • Serve the angular app using ng serve to see the output.

 

Parameters:

 

  • tokens: A set of CSS styles or HTML styles associated with an animation state.

 

Return Value:

 



  • AnimationStyleMetadata: An object that encapsulates the style data.

 

Example 1:

 

app.module.ts
 


 
app.component.ts
 


 

 

 

app.component.html
 


 

 

 

Output:

 

 

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

 

My Personal Notes arrow_drop_up
Previous
Next
Recommended Articles
Page :
Article Contributed By :
Vote for difficulty