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