Wednesday, July 10, 2024
Angular 10JavascriptMaterialAngular

Angular 10 Material Carousel Slider

Angular 9, Angular 10

Hello to all, welcome to In this post, I will tell you, Angular 10 Material Carousel Slider.

Guys here is the updated Material Carousel for Angular 11+ : Angular 11 Material Carousel

Material Slider

Angular 10 came and if you are new in Angular 10 then please check below links:

Angular 10 for beginners

Angular 10 basic tutorials

Here are the basic steps for angular 10 material carousel slider and please follow carefully:

1. Here is the command, you need to run into your command prompt:

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


2. Here is the code, you need to add into your app.module.ts file:

import { MatCarouselModule } from '@ngmodule/material-carousel';
  // ...
  imports: [
    // ...
    // ...
export class AppModule {}


3. Here is the code, you need to add into your app.component.ts file:

import { MatCarousel, MatCarouselComponent } from '@ngmodule/material-carousel';

export class AppComponent {
   // Slider Images
   slides = [{'image': ''}, {'image': ''},{'image': ''}, {'image': ''}, {'image': ''}];


4. Here is the code, you need to add your app.component.html file:

<h1 style="text-align:center;">Angular 9 Material Carousel Slider</h1>
  timings="250ms ease-in"
    *ngFor="let slide of slides; let i = index"


This is it and if you have any kind of query then please comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.


Thank you

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.