Search results

Populating Items in Angular Carousel component

24 May 2022 / 4 minutes to read

In the Carousel, slides can be rendered in two ways as follows,

  • Populating items using carousel item
  • Populating items using data source

When rendering the Carousel component using items binding, you can assign templates for each item separately or assign a common template to each item. You can also customize the slide transition interval for each item separately. The following example code depicts the functionality as item property binding.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.css
Copied to clipboard
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `<!-- To Render Carousel. -->
<div class="control-container">
  <ejs-carousel>
    <e-carousel-items>
      <e-carousel-item>
        <ng-template #template>
          <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" alt="cardinal" style="height:100%;width:100%;" />
            <figcaption class="img-caption">Cardinal</figcaption>
          </figure>
        </ng-template>
      </e-carousel-item>
      <e-carousel-item>
        <ng-template #template>
          <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" alt="kingfisher" style="height:100%;width:100%;" />
            <figcaption class="img-caption">Kingfisher</figcaption>
          </figure>
        </ng-template>
      </e-carousel-item>
      <e-carousel-item>
        <ng-template #template>
          <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" alt="keel-billed-toucan" style="height:100%;width:100%;" />
            <figcaption class="img-caption">Keel-billed-toucan</figcaption>
          </figure>
        </ng-template>
      </e-carousel-item>
      <e-carousel-item>
        <ng-template #template>
          <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" alt="yellow-warbler" style="height:100%;width:100%;" />
            <figcaption class="img-caption">Yellow-warbler</figcaption>
          </figure>
        </ng-template>
      </e-carousel-item>
      <e-carousel-item>
        <ng-template #template>
          <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" alt="bee-eater" style="height:100%;width:100%;" />
            <figcaption class="img-caption">Bee-eater</figcaption>
          </figure>
        </ng-template>
      </e-carousel-item>
    </e-carousel-items>
  </ejs-carousel>
</div>`,
})
export class AppComponent {}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { CarouselModule } from '@syncfusion/ej2-angular-navigations';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, ButtonModule, CarouselModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
.control-container {
  height: 360px;
  margin: 0 auto;
  width: 600px;
}

.img-container {
  height: 100%;
  margin: 0;
}

.img-caption {
  color: #fff;
  font-size: 1rem;
  position: absolute;
  bottom: 3rem;
  width: 100%;
  text-align: center;
}

Populating items using data source

When rendering the Carousel component using data binding, you can assign a common template only for all items using the itemTemplate property. You cannot set the interval for each item. The following example code depicts the functionality as data binding.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.css
Copied to clipboard
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `<!-- To Render Carousel. -->
<div class="control-container">
  <ejs-carousel [dataSource]="productItems">
    <ng-template #itemTemplate let-data>
      <div class="slide-content">{{ data.Title }}</div>
      <figure class="img-container">
        <img [src]="getImage(data.imageName)" alt="{{data.Name}}" style="height:100%;width:100%;" />
        <figcaption class="img-caption">{{data.Name}}</figcaption>
      </figure>
    </ng-template>
  </ejs-carousel>
</div>`,
})
export class AppComponent {
  public productItems: Record<string, string | number>[] = [
{ ID: 1, Name: "Cardinal", imageName: 'cardinal' },
{ ID: 2, Name: "Kingfisher", imageName: 'hunei' },
{ ID: 3, Name: "Keel-billed-toucan", imageName: 'costa-rica' },
{ ID: 4, Name: "Yellow-warbler", imageName: 'kaohsiung' },
{ ID: 5, Name: "Bee-eater", imageName: 'bee-eater' }
  ];

  public getImage(bird: string): string {
return `https://ej2.syncfusion.com/products/images/carousel/${bird}.png`;
  }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { CarouselModule } from '@syncfusion/ej2-angular-navigations';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, ButtonModule, CarouselModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
.control-container {
  height: 360px;
  margin: 0 auto;
  width: 600px;
}

.img-container {
  height: 100%;
  margin: 0;
}

.img-caption {
  color: #fff;
  font-size: 1rem;
  position: absolute;
  bottom: 3rem;
  width: 100%;
  text-align: center;
}

Selection

The Carousel items will be populated from the first index of the Carousel items and can be customized using the following ways,

  • Select an item using the property.
  • Select an item using the method.

Select an item using the property

Using the selectedIndex property of the Carousel component, you can set the slide to be populated at the time of initial rendering else you can switch to the particular slide item.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.css
Copied to clipboard
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `<!-- To Render Carousel. -->
<div class="control-container">
  <ejs-carousel [selectedIndex]="selectedIndex">
    <e-carousel-items>
      <e-carousel-item>
        <ng-template #template>
          <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" alt="cardinal" style="height:100%;width:100%;" />
            <figcaption class="img-caption">Cardinal</figcaption>
          </figure>
        </ng-template>
      </e-carousel-item>
      <e-carousel-item>
        <ng-template #template>
          <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" alt="kingfisher" style="height:100%;width:100%;" />
            <figcaption class="img-caption">Kingfisher</figcaption>
          </figure>
        </ng-template>
      </e-carousel-item>
      <e-carousel-item>
        <ng-template #template>
          <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" alt="keel-billed-toucan" style="height:100%;width:100%;" />
            <figcaption class="img-caption">Keel-billed-toucan</figcaption>
          </figure>
        </ng-template>
      </e-carousel-item>
      <e-carousel-item>
        <ng-template #template>
          <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" alt="yellow-warbler" style="height:100%;width:100%;" />
            <figcaption class="img-caption">Yellow-warbler</figcaption>
          </figure>
        </ng-template>
      </e-carousel-item>
      <e-carousel-item>
        <ng-template #template>
          <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" alt="bee-eater" style="height:100%;width:100%;" />
            <figcaption class="img-caption">Bee-eater</figcaption>
          </figure>
        </ng-template>
      </e-carousel-item>
    </e-carousel-items>
  </ejs-carousel>
</div>`,
})
export class AppComponent {
  public selectedIndex: number = 3;
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { CarouselModule } from '@syncfusion/ej2-angular-navigations';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, ButtonModule, CarouselModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
.control-container {
  height: 360px;
  margin: 0 auto;
  width: 600px;
}

.img-container {
  height: 100%;
  margin: 0;
}

.img-caption {
  color: #fff;
  font-size: 1rem;
  position: absolute;
  bottom: 3rem;
  width: 100%;
  text-align: center;
}

Select an item using the method

Using the prev or next public method of the Carousel component, you can switch the current populating slide to a previous or next slide.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.css
Copied to clipboard
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `<!-- To Render Carousel. -->
<button ejs-button cssClass="e-info" (click)="prevBtnClick()">Previous</button>
<button ejs-button cssClass="e-info" (click)="nextBtnClick()">Next</button>
<div class="control-container">
  <ejs-carousel>
    <e-carousel-items>
      <e-carousel-item>
        <ng-template #template>
          <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" alt="cardinal" style="height:100%;width:100%;" />
            <figcaption class="img-caption">Cardinal</figcaption>
          </figure>
        </ng-template>
      </e-carousel-item>
      <e-carousel-item>
        <ng-template #template>
          <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" alt="kingfisher" style="height:100%;width:100%;" />
            <figcaption class="img-caption">Kingfisher</figcaption>
          </figure>
        </ng-template>
      </e-carousel-item>
      <e-carousel-item>
        <ng-template #template>
          <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" alt="keel-billed-toucan" style="height:100%;width:100%;" />
            <figcaption class="img-caption">Keel-billed-toucan</figcaption>
          </figure>
        </ng-template>
      </e-carousel-item>
      <e-carousel-item>
        <ng-template #template>
          <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" alt="yellow-warbler" style="height:100%;width:100%;" />
            <figcaption class="img-caption">Yellow-warbler</figcaption>
          </figure>
        </ng-template>
      </e-carousel-item>
      <e-carousel-item>
        <ng-template #template>
          <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" alt="bee-eater" style="height:100%;width:100%;" />
            <figcaption class="img-caption">Bee-eater</figcaption>
          </figure>
        </ng-template>
      </e-carousel-item>
    </e-carousel-items>
  </ejs-carousel>
</div>`,
})
export class AppComponent {
  public prevBtnClick() {
let carouselObj = (document.querySelector(".e-carousel") as any).ej2_instances[0];
carouselObj.prev();
  }

  public nextBtnClick() {
let carouselObj = (document.querySelector(".e-carousel") as any).ej2_instances[0];
carouselObj.next();
  }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { CarouselModule } from '@syncfusion/ej2-angular-navigations';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, ButtonModule, CarouselModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
.control-container {
  height: 360px;
  margin: 0 auto;
  width: 600px;
}

.img-container {
  height: 100%;
  margin: 0;
}

.img-caption {
  color: #fff;
  font-size: 1rem;
  position: absolute;
  bottom: 3rem;
  width: 100%;
  text-align: center;
}