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

Self-contained component animation - Angular Tutorial

From the course: Angular: Animations

Start my 1-month free trial

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…

Contents