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.
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:
@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.
Q4. How do you trigger an animation?
In the template, use @triggerName syntax. Example:
<div @openClose="isOpen ? 'open' : 'closed'"></div>Q5. What are route animations?
Route animations animate the transition between different routes. They use the same animation system but tied to route changes. You can animate the entering and leaving of components based on route state, often using query and group for parallel animations.