Now that you understand how Angular animations are used within a new project, it is beneficial to see how an existing project can be modified to make use of this functionality. For this purpose, use a slightly updated version of the Angular video playback application from the course “Building Custom HTML5 Video Playback with Angular 2”.
- [Instructor] Now that we understand how Angular animations are used within a new project, it would be beneficial to see how an existing project can be modified to make use of this functionality. For this purpose, we'll use a slightly update version of the Angular Video Playback application from my course Building Custom HTML5 Video Playback with Angular 2. The only difference in this project, is that has been updated to make use of Angular 4. So as you can see, we get a number of things on the screen here.
We have a title, we have this big play button. We have a toolbar with a scrubber, volume, playback, time readout, and so forth. So if we go ahead and play this, we can see the present video. When we pause it, then the video pauses. We've got full screen capability and we also have this little video details panel where it provides a description of the video and you're actually able to go through and click to play other videos.
And that's the basics of this current Angular application which does not use Angular animations at this time. We're going to go ahead and fix that though.
- 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