Angular 8 | ng-bootstrap Carousel Tutorial


There are a number of options available for an Image/ Content Carousel in Angular project, but Bootstrap Carousels are pretty much popular among developers due to their easy implementation and very fewer dependencies.

In this tutorial, we will discuss how to implement Bootstrap Carousel in Angular project using ng-bootstrap package. NgBootstrap is built on Angular with readily available UI components, which is very easy to install and usage of UI components is very smooth.

Those who are new to ng-bootstrap, we will start from scratch. First, we will create a new Angular project using latest NgCLI version 8.3.0 and then install the ng-bootstrap package with latest version 4.3.1.

Let’s start!

Create a new Angular project

Here we will use Ng CLI tool to create a new Angular project, run following command in terminal:

Install Bootstrap in Angular Project

Let’s install Bootstrap by running following NPM command. This will install the latest bootstrap version ( Current is 4.3.1 )

ng-bootstrap includes UI components only, so for adding styling to these components we need to include CSS styling file in the index.html at Angular project root

 

Import NgbModule ( Bootstrap module ) & FormsModule ( for Angular as we will use [(ngModel)] ) in the app.module.ts file

Add Bootstrap Carousel

Now we have successfully installed and configured ng-bootstrap in our Angular project.

To use ng-bootstrap Carousel we use ngb-carousel directive with some properties which we will discuss later. The ngb-carousel works as a container for Carousel slides.

For each slide, in our carousel, we add an ng-template element with ngbSlide directive. Each ng-template element with ngbSlide acts as a carousel slide.

 

There are some important option properties available which we will discuss now.

NgbCarousel

Input Properties:

activeId: The id of a slide which we want to display initially.

interval: Time in ms after which slide moves to next.

keyboard: To enable/ disable keyboard interaction, default is set to true.

pauseOnHover: Default is set to true, the carousel will stop on mouse hovers.

showNavigationArrows: Next and Previous arrow controls can be controlled by providing boolean value. Default is set to true.

showNavigationIndicators: Bottom indicators are controlled using this property. Default is set to true.

wrap: Property to loop over slides, default is set to true and show the first slide after last.

 

Output Properties:

slide: An event emitted right after the slide transition is completed.

In component, we will import NgbSlideEvent & NgbSlideEventSource then use the slide method as shown below:

 

Carousel behavior can be controlled from outside using the below methods:

Methods:

select: Navigates to a slide with provided slide id.

prev: Navigates to the previous slide.

next: Navigates to the next slide.

pause: Pauses the navigation of slides.

cycle: Restarts the slides navigation from left to right.

To use above methods on a carousel we add a template reference variable #mycraousel and call above methods from the component as shown below:

In component use @ViewChild to get carousel reference then import NgbCarousel as shown below:

So in this post, we discussed how to use Bootstrap Carousel in Angular project with content and images. There is a demonstration on Bootstrap carousel with available input and output properties and events using which we can control Carousel navigation from a component using a reference variable.

Check other NgBootstrap tutorials here.


Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Rahul Sharma Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Rahul Sharma
Guest
Rahul Sharma

How do I add animation/transition between each slide.