How To Add Angular Material Carousel Angular 10/11

In this tutorial, we learn how to add important angular carousel angular 11. this slide is an easy-to-use angular app. this time we use angular 11 @ngbmodule/material-carousel.

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

The @ngbmodule/material-carousel package provides the addition of an important carousel to your angular project. In this tutorial we will see a simple example of a carousel with preview:

Step 1: Create New App

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

Step 2: Install npm Package

In this step, we need to install module gmodule/material-carouse in our angular application.

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

Step 3: Import MatCarouselModule

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

src/app/app.module.ts

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
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports:      [
    BrowserModule, 
    BrowserAnimationsModule, // ---------- Important
    FormsModule,
    ReactiveFormsModule,
    MatCarouselModule.forRoot() // ---------- Important
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Update Ts File

Now, we need to update the ts 

src/app/app.component.ts

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

Step 5: Update HTML DOM

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

src/app/app.component.html

<h1>How To Add Angular Material Carousel Angular 10/11 - phpcodinstuff.com</h1>
  
<mat-carousel
  timings="250ms ease-in"
  [autoplay]="true"
  interval="6000"
  color="accent"
  maxWidth="auto"
  proportion="25"
  slides="5"
  [loop]="true"
  [hideArrows]="false"
  [hideIndicators]="false"
  [useKeyboard]="true"
  [useMouseWheel]="false"
  orientation="ltr"
>
  <mat-carousel-slide
    #matCarouselSlide
    *ngFor="let slide of slides; let i = index"
    [image]="slide.image"
    overlayColor="#00000040"
    [hideOverlay]="false"
  ></mat-carousel-slide>
</mat-carousel>

Lets run or application to execute the command: 

ng serve

Thanks...