Angular Animations — Let’s create a carousel with reusable animations

Intro

In this tutorial we’re going to create a carousel (or slider, if that’s your fancy) by using Angular animations. We’ll cover all the necessary steps in creating the carousel, so feel free to skip ahead.

We will cover:

• Creating a functional carousel component in Angular.
• Adding a basic fade animation to the carousel using Angular Animations.
• Extract the animation and make it reusable.
• Bonus: prefetch the images

Live Demo: https://brampeirs.github.io/angular-carousel/

Github Repo: https://github.com/brampeirs/angular-carousel

StackBlitz: http://stackblitz.com/github/brampeirs/angular-carousel

Step 1: Creating The Carousel

The first step for building an animated carousel is to build a functional carousel itself. So let’s get started with generating the carousel component using the Angular CLI.

ng generate component carousel

The CLI creates a new folder, src/app/carousel/, and generates the files of the carousel component. The CLI also declares the carousel component in the App Module for you 👍.

The CarouselComponent class file is as follows:

Display the Slides

Now that our carousel component is created, let’s pass some slides to it.

In app.component.ts we will create a collection of slides that we will pass to our carousel component. We use an array of objects so you can add additional properties like a description for each slide later on. You could use a service for this, but for simplicity we’re just going to declare our images in the App component. (I used some from Unsplash).

Next in app.component.html we declare our carousel component and pass the slides collection. Since we will design the carousel to take up all space available, we also wrap it in a div with the class container that has a height and width set.

You can use these styles for the container class (you should change these for your needs):

Next in carousel.component.ts we can get the passed slides by making use of the @Input() decorator. (don’t forget to add the import at the top).

Great! Now we have our slides collection available in our carousel component. Let’s display them.

In carousel.component.html add the following html.

Here we will iterate over the slides collection in our template to display the images. This is accomplished with a basic ngFordirective where we bind the src attribute to the slide.src value. We are also going to track the index by assigning it to an iproperty.

Let’s give the carousel some style, by adding the following styles to carousel.component.scss

Great! Now we have a non functioning carousel, it should look like this:

Carousel without functionality

Interact with the Slides

In carousel.component.ts we declare the property currentSlide. We will use this property to determine which slide is currently active and should be shown. We will also add the methods onPreviousClick and onNextClick. The methods will update the currentSlide property. Simple as that 😎

Next in our html let’s add the currentSlide property and add the methods to the controls. ThengIf directive will make sure only the active slide is visible. When we click the next or prev buttons, the corresponding methods in our class will be invoked and update the currentSlide property.

We should now have a functional carousel 🎉.

carousel with basic functionality

Step 2: Adding animations

Before we can make use of Angular Animation functionalities, we will have to import the browser animations module in app.module.ts. Let’s add it to our imports array.

Basic Animation

We will start by creating a simple fade animation. Animations are defined within the @Component() decorator. (don’t forget the imports).

By making use of void => * and * => void we are animating the entering and leaving of the slides. You can read more about it here. Within the transition definition, we will call style to set the initial opacity to 0 and also call animate to fade in the slide to full opacity over 300 milliseconds. We will do the reverse for the slide we want to remove by setting its opacity to 0 over 300 milliseconds as well.

For the animations to trigger, we have to attach the animation trigger to the img element in the component’s template. We do this by adding @carouselAnimation.

Great! We now have our simple fade animation.

Carousel with basic fade animation

Reusable Animations

Now let’s make this animation reusable so you can reuse your animations in other Angular components.

To create a reusable animation, use the animation() method to define an animation in a separate .ts file and declare this animation definition as a const export variable. You can then import and reuse this animation in any of your app components using the useAnimation() API.

Let’s start by creating a new file carousel.animations.ts in the carousel folder. Now let’s define our animation there.

We can now make use of these animations by importing them in carousel.component.ts and invoking them with useAnimation.

Great! now we have the same behaviour but with reusable animations. Let’s go a step further and pass the duration to the animations. We do this by adding a params object.

in carousel.animations.ts let’s use the time value:

Setting the time to 1300ms should result in something like this:

Add more animations

Let’s add a scale animation to carousel.animations.ts

We can now import and use this animation in our carousel component. As simple as that! (we replace fadeIn/fadeOut by scaleIn/scaleOut).

You can find the flip and JackInTheBox animations here.

Bonus: Prefetch The Images

Let’s create a method called preloadImages in carousel.component.ts . We will invoke this method once when the carousel initialises.

Note: in case you would want to update the slides input property, it makes more sense to use ngOnChanges instead of ngOnInit if you want the preload method to run every time the slide object changes.

Well done!

We made it to the end! Hope you found this article helpful! Please, help spread this guide to a wider audience with your 👏 👏 👏.

Sources

• Scale animation: https://codepen.io/jh3y/pen/WwVKLN
• Images: https://unsplash.com/collections/1103088/one-color