From the course: Angular: Animations

Preparing component interaction - Angular Tutorial

From the course: Angular: Animations

Start my 1-month free trial

Preparing component interaction

“

- Angular animations are defined within individual components. Before we start using classes from the animation's package, we'll need to create a component to animate and include an instance of this component within our project. So, let's go ahead and make sure we're directly within app and create a new component here. So, new file. And we'll name it animbox.component.ts Alright, so, inside of this component, I have a snippet from our snippets file that we're going to paste in. And here we're just importing component from angular core and then inside a component, we have a selector of animbox and we've defined our template as something very simple here, it's just a div with a specific class that is then styled through our styles meta data here. It's given a background color, width and height, a border-radius and a margin. And then we export this as animbox component. So, let's save this. Now, whenever we create a new component, we need to add it to our modules, so we'll open up app.modules and scrolling up here, we're going to go ahead and just copy and paste this to modify it. Instead of app.component to animbox.component and then the specific component definition, of course, is going to be animbox component, as the auto complete shows us here. With any component, we need to go ahead, scrolling down ... One nice feature of visual studio code as well and, a lot of editors have this, is you're able to collapse chunks of code, so I'm going to just collapse that so we don't have to scroll down so much. And then right underneath app component, I'm going to put our animbox component reference right there in our declarations and save. We're going to add our animbox component instance into our basic component. So, let's open up basic component from roots and here we can go ahead and just pop it right in here. I'm going to put it in this second column as animbox and save. Now, notice that this animbox right here shares the selector animbox with our actual animbox component. Let's pop over to our web browser and have a look. Alright, so here we are at the project home. Let's go to basics and perfect. There is our animbox component instance rendering inside of our Animation Basics route component view. With this basic component now defined, we can move forward and establish some mechanisms to drive animation within it.

Contents