<ejs-carousel cssClass="default-carousel">
    <e-carousel-items>
        <e-carousel-item>
            <ng-template #template>
              <figure class="img-container">
                <img src="https://ej2.syncfusion.com/angular/demos/assets/carousel/images/bridge.jpg" alt="bridge" style="height:100%;width:100%;" />
                <figcaption class="img-caption">Golden Gate Bridge, San Francisco</figcaption>
              </figure>
            </ng-template>
          </e-carousel-item>
          <e-carousel-item>
            <ng-template #template>
              <figure class="img-container">
                <img src="https://ej2.syncfusion.com/angular/demos/assets/carousel/images/trees.jpg" alt="spring_trees" style="height:100%;width:100%;" />
                <figcaption class="img-caption">Spring Flower Trees</figcaption>
              </figure>
            </ng-template>
          </e-carousel-item>
          <e-carousel-item>
            <ng-template #template> 
              <figure class="img-container">
                <img src="https://ej2.syncfusion.com/angular/demos/assets/carousel/images/waterfall.jpg" alt="waterfall" style="height:100%;width:100%;" />
                <figcaption class="img-caption">Oddadalen Waterfalls, Norway</figcaption>
              </figure>
            </ng-template>
        </e-carousel-item>
    </e-carousel-items>
</ejs-carousel>

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent { }