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

Leave a Reply

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

We'll share your Website Only Trusted.!!

close