From the course: Angular: Animations
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Self-contained component animation - Angular Tutorial
From the course: Angular: Animations
Self-contained component animation
- [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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
Self-contained component animation6m 43s
-
Writing reusable animations5m 25s
-
Animation input parameters3m 58s
-
Configuring router animation6m 53s
-
Selecting items with a query6m 20s
-
Using Stagger within an animation1m 37s
-
Challenge: Per-page router animations23s
-
Solution: Per-page router animations2m 1s
-
-
-
-