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:

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

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

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 File

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>

Now you can run by bellow command:

ng serve

Conclusion

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...

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