With the AnimboxComponent interaction, you’ve set state values from outside of the actual component. It is also possible to have states triggered from within the component itself. In this example, use the MouseComponent previously developed to showcase this workflow.
- [Instructor] With our previous component interactions,…we've set state values from outside the actual component.…It's also possible to have states triggered…from within the component itself.…In this example we'll create a…new component to showcase this workflow.…So within our application, in our app folder,…we want to create a new file and…we'll call this mouse.component.ts.…
And in here we have a snippet that…we can paste in for the body of our component.…And this is going to import component,…of course, from angular core…and it'll also import a bunch…of animation stuff from angular animations.…The component selector we name mouse.…And the template consists of a div with…the class of my mouse, which is decorated…with some CSS within our styles.…
This is basically going to render a div element with…a width of 200 by 200, with a border…radius of 200, as a circular element.…And then we export this as mouse component.…Let's go ahead and save our new component.…And then pop back over to app.module because…of course we now need to import…
- 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.