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