From the course: Angular: Animations
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Animation input parameters - Angular Tutorial
From the course: Angular: Animations
Animation input parameters
- [Instructor] As we saw in the previous lesson, reusable animations allow us to define an animation once and use it multiple times across our angular application. But what if we want to adjust the timing, delay, or other properties to adjust slightly for different circumstances. This is where input parameters will come into play. Let's pop over to our animations.ts file. And I'm going to replace our current fadeAnimation which as you can see here has all sorts of values predefined. I'll replace this with a modified version from our snippets file, which instead uses various input parameters for things like time, delay, to and from. And you can see that this works with just regular, angular data binding. Let's go ahead and save. So this prepares our reusable animation to accept input parameters. Now we have to go over to whatever's using this animation and set it up a little bit differently how it actually invokes useAnimation. So go back into fadeblock.component and let's actually…
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
-
-
-
-
-
-
(Locked)
Self-contained component animation6m 43s
-
(Locked)
Writing reusable animations5m 25s
-
(Locked)
Animation input parameters3m 58s
-
(Locked)
Configuring router animation6m 53s
-
(Locked)
Selecting items with a query6m 20s
-
(Locked)
Using Stagger within an animation1m 37s
-
(Locked)
Challenge: Per-page router animations23s
-
(Locked)
Solution: Per-page router animations2m 1s
-
(Locked)
-
-
-