Activity

Create a set of components with work together to create a Carousel which we can use to display different images in rotation.

Like so: image::/assets/images/courses/angular/4.components/activity_example.gif[]

We also want the carousel delay between rotations to be configurable.

The markup for our carousel will look like so:

<carousel [delay]="2000">
  <carousel-item>
    <img src="https://unsplash.it/200?image=0" alt="">
  </carousel-item>
  <carousel-item>
    <img src="https://unsplash.it/200?image=100" alt="">
  </carousel-item>
  <carousel-item>
    <img src="https://unsplash.it/200?image=200" alt="">
  </carousel-item>
</carousel>

Steps

Fork this plunker:

Finish off the components to implement the carousel.

Read any TODO comments in the plunker for hints.

Solution

When you are ready compare your answer to the solution in this plunker:


Learn Angular 5 For FREE

I've released my 700 page Kick Starter funded Angular 5 book for FREE