Within the components that were created, write some metadata detailing how to control any desired animation between various states based upon specific triggers. These triggers monitor the changes in stateful data being passed over from the parent component and can then fire off different animations based upon any particular state.
- [Narrator] Within the component we've created…we'll need to write some metadata…detailing how to control any desired animation…between various states based upon specific triggers.…These triggers will monitor the changes in stateful data…being passed over from the parent component…and can then fire off different animations…based upon any particular state.…So we have our state contained in this switchstate variable.…We need to pass that into our component instance, animbox.…
To do that, we set our currentState attribute here,…and notice the brackets we're using,…we set that equal to switchstate.…So as switchstate changes its value,…that's going to be reflected via currentState…within the animbox component.…Let's go ahead and save our basic component…and we need to handle currentState…from within our animbox component,…so we'll switch over to that right now.…
The first thing we'll need to do inside of animbox…is to actually import what we're going to need…to use from our animations package.…So I'm going to paste in this import statement.…
- Installing the Angular CLI
- Creating a new project
- Verifying the animations package
- Configuring project routes
- Animating components
- Triggering animation between states
- Stepped and parallel animation
- Writing reusable animations
- Animating individual items with query and stagger
- Animating an existing Angular project
Skill Level Intermediate
1. Getting Ready to Animate
2. Enabling Angular Animations
3. Angular Animation Basics
4. Advanced Angular Animation
5. Animating an Existing Interface
6. Package for Distribution
Building the project1m 56s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.