How To Add Angular Material Carousel Angular 10/11

In this tutorial, we learn how to add angular material carousel angular 11. this slider is a very easy-to-use angular app. this time we use angular 11 @ngbmodule/material-carousel.

This article will provide an Angular Material carousel in angular 11 material. if you have a question about the angular 11 material carousel slider example then I will give a simple example with a solution.  In this article, we will implement Angular Material carousel angular 10/11. Here you will learn how to add angular 11 material design carousel example step by step.

@ngbmodule/material-carousel package provides to adding material carousel to your angular project. In this tutorial we will see material carousel simple example with preview:

How To Add Angular Material Carousel Angular 10/11 - Php Coding Stuff

Step 1: Create New App

First of all, You can easily create your angular app using bellow command:

ng new myNewApp

Step 2: Install npm Package

In this step, we need to just install ngmodule/material-carousel and angular/material in our angular application. so let's add as like bellow angular carousel:

ng add @angular/material
npm install @ngmodule/material-carousel

Step 3: Import MatCarouselModule

We will import the MatCarouselModule module as like bellow code angular carousel material:


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; //---------  Important
import { MatCarouselModule } from '@ngmodule/material-carousel'; // ---------- Important
  declarations: [
  imports:      [
    BrowserAnimationsModule, // ---------- Important
    MatCarouselModule.forRoot() // ---------- Important
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Step 4: Update Ts File

here, we need to update the ts file as like below:


import { Component } from '@angular/core';
import { MatCarousel, MatCarouselComponent } from '@ngmodule/material-carousel'; // -------- important
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  slides = [
      {'image': ''}, 
      {'image': ''},
      {'image': ''}, 
      {'image': ''}, 
      {'image': ''}

Step 5: Update HTML File

We need to update the HTML file as like bellow code:


<h1>How To Add Angular Material Carousel Angular 10/11 -</h1>
  timings="250ms ease-in"
    *ngFor="let slide of slides; let i = index"

Now you can run by bellow command:

ng serve


In this short post, we've seen by example how to easily create a carousel of your Angular 10/11 Material UI using the @ngmodule/material-carousel library.

I hope it can help you...

  1. this code is not work, when i am using this code the error is show that slide="5", proportion="25", 'string' is not assignable to type 'number', Cannot find name 'MouseWheelEvent'. 59 onMouseWheel(event: MouseWheelEvent): void; please tell, how to solve it

Leave a Reply

Your privacy will not be published. Required fields are marked *

We'll share your Website Only Trusted.!!