Exercise: create a infinite Carousel with Angular Signals
How to create an infinite carousel in Angular with Signals
1
snippet3 mins
In this exercise, you will create a simple image carousel using Angular standalone components and signals.
This exercise will help you understand how to manage local states with Angular signals, computed properties, and handle user interactions and side effects.
Follow the steps below to complete the exercise:
The script is partially done. The "prev" and "next" buttons are in place but it needs to be completed:
-
Display the labels: update the template to show the *current index of the displayed image along with the total number of images in the carousel.
-
Implement logic to navigate through images using "Prev" and "Next" buttons: this is partially done and the navigation works but ensure that the carousel wraps around when navigating beyond the first or last image.
Read the comment in the snippet:
src/app.component.ts
src/data.ts
2 solutions are available in the next recipe
