As an Angular application grows over time,
you probably find that you constantly need to refactor things so that shared concepts,
logic, behavior, etcetera can be reused. You build things, then later down the road,
you build something that needs to do something similar and now you want to breakout that
concept so that it can be shared right? Well, animations in Angular are the same. Once you start building and using them, you probably find that you need to
use them in multiple components. Well, in this video I’ll show you how to do this. Alright, let’s get to it. Now, before we get too far along,
it’s important to note that I’ve already created several videos focused
on the animation framework in Angular. They cover the basics of setting
up and using animations in Angular, creating state-based and enter/leave
animations, using the keyframes, query, and stagger functions to create more complex
animation sequences, using the start and done animation events, creating animations
that run in parallel versus in sequence, animating to unknown heights, and adding
configurable animations with params. So, if any of those concepts are
unfamiliar to you, you’ll probably want to check those videos out first
so that you’re not lost in this video. And, to make them easier to find, I’ve created an Angular Animation
playlist to help, so check it out! Ok, enough of that, onto
the example for this video. Here we have this application called Petpix. It’s an application where people
share cool images of their pets. As you click to look through the images, you can see the nice transition forward
as you navigate to the “next” image. And then, when you navigate backwards
with the “previous” button you can see that it animates nicely in the opposite direction. Now, if you want to learn in detail
about how I created this animation, you’ll want to check out my video on
how to use Angular animation params because we’re not really going to cover the
animation itself in detail in this video. Now, since we created this animation, we’ve added the header to the application,
and the header contains a hamburger menu. When we click on this menu
button, we see our menu. So, that’s cool, but it doesn't
look great when it opens. It would be better if we added some
animation as it opens and closes, right? Since it’s opening from the
right side of the viewport, it would be nice if it slid in as it opens,
and then if it slid out when it closes. Well, this is what we’re
going to do in this video. But instead of creating this animation
all over again and bloating our code base, we’re going to take the slide left/right
animation from our gallery slider component and instead make it shared so that
we can use it in both components. Ok, so let’s take a look at our
animation in the component.ts. Here’s the animation that we’re going to move. When creating a reusable animation, we create it in a separate file
that we can then just import from. So, let’s start by adding a
directory named “animations”. Next, let’s add a file named
slide dot animation dot ts. Now let’s switch back to the slider component real quick and copy everything
within the transition function. Ok, let’s switch back to the new animation file. When we create a reusable animation, we
create it as an exportable const that we can then just import, so let’s
add a const named “slideAnimation”. Now to set this const, we’re going to use the animation function from the
Angular animations module. This function takes in an
array of animation steps, so we can paste what we copied
from our slider component here. We also need to make sure all
of the stuff we’re using from the animations module is properly
imported here in this file too. Ok, at this point we now
have a reusable animation. But, you can see that we have some
params here that allow us to pass an “enterStart” and an “leaveEnd” translate value. But we also have a hard-coded scale value
that works nicely in the slider component, but the thing is, we don’t want our
menu to scale at all as it animates, we just want it to slide in and out. That’s it. So, what I’m going to do is convert
this scale to a parameter too. Let’s call it “hiddenScale”. Ok, that’s all we need. Now let’s go swap this out
in our slider component. We can start by removing everything
within the transition function. Let’s remove the imports that
are no longer needed too. Also, we can remove the params object from the transition since they will now
be part of the shared animation. Now, to use our new animation, we will use the useAnimation()
function from the animations module. And then, all we need to do is pass this
function our exported “slideAnimation” const. Ok, almost there. All that’s left now is to go and make
sure our animation params are being properly passed to our animation in the template. So, both our “leaveEnd” and our “enterStart”
params can stay as is but remember that we added a “hiddenScale” param
that we need to set here. There, that should be all we need. Let’s save and try it out. Now, if we got it right, the slider should
work exactly as it did, so let’s try it. Cool, looks right as we navigate
forward, how about going backwards? Nice, looks good there too. Next up, we have the whole purpose
for creating the shared animation. To make our nav component transition
as it’s toggled opened and closed. Let’s switch to the code for
our header component because that’s where our navigation component is toggled. In the template here, we see the condition
using a “showMenu()” signal to toggle the menu. If it’s true it’ll show, if not, it won’t. Since our animation queries for
elements entering and leaving, we’ll bind our animation on this div here. Let’s call the trigger “slideToggle”
like we had in our slider component. It doesn’t have to be named the same, but I
like that name for this animation trigger. Now, we’ll want to run this animation every
time the “showMenu()” signal value changes, so we’ll use that as our value. Now let’s add our “params” object. Within this object, we need our “leaveEnd”
param, it’ll be one hundred percent so that it ends outside of the viewport,
to the right when it’s closed. Then we can add our “enterStart” param which
will also be one hundred percent because, when it’s opening, it will start outside
the right edge of the viewport too. Then, we can add our “hiddenScale” param. In this case, since we don’t want it to scale
as it animates, we’ll give it a value of one. Ok, now we just need to create and import our
animation so let’s switch over to the code. First, we need to add the
animations metadata array. Within this array we need to add our
“slideToggle” trigger using the trigger function. Then, we add our transition which will
run whenever the “showMenu” value changes. Then within this transition, we can
include the “slideAnimation” using the useAnimation() function
from the animations module. And that should be everything, so
let’s save and see if it works. Let’s slick the hamburger
button to toggle the menu. Nice, looks like it’s
transitioning like we want now. What if we close it? Cool, that works too. So, it’s nice that we didn’t need to create
a whole new animation within the header component to pull off a very similar
animation style to our image slider. Just like everything else, it’s better if
we can share and reuse similar concepts. So, hopefully this will help you out as you add
more and more animations to your Angular projects. Now, believe it or not, there’s
still more to Angular animations outside of all of the videos that
I’ve already created on them so far. So, we’ll go ahead and call it for this video, but be on the lookout for more
on animations in the future. That’s all for now, thanks for watching.
