Q1. What are Angular animations?
Angular animations are a powerful system for creating complex animations based on the Web Animations API.
They are integrated with Angular''s change detection and can be triggered by state changes.
Animations are defined using @angular/animations and configured in components.
They are integrated with Angular''s change detection and can be triggered by state changes.
Animations are defined using @angular/animations and configured in components.
Q2. How do you set up animations in an Angular project?
Import BrowserAnimationsModule in your app module.
Then in a component, add animations property with animation triggers.
Example:
Then in a component, add animations property with animation triggers.
Example:
@Component({
animations: [
trigger(''openClose'', [
state(''open'', style({ height: ''*'' })),
state(''closed'', style({ height: ''0px'' })),
transition(''open <=> closed'', animate(''300ms''))
])
]
})
Q3. What are the key concepts in Angular animations?
Key concepts: trigger (defines animation trigger), state (defines styles for a state), transition (defines how to change between states), animate (defines timing and easing), and keyframes for multi-step animations.
These are imported from @angular/animations.
These are imported from @angular/animations.