Angular Carousel with SwiperJS

swiper_carousel_angular.md

Angular Carousel with SwiperJS

Intro

An Angular carousel created with SwiperJs.
Carousel component is programmed to accept every kind of template passed as carouselItem and return data passed as carouselData to the template.
This "short circuit" allows the Carousel component to stay transparent and agnostic, delegating the logic and design to the component that uses the Carousel.

---

---

Carousel Component

Html

<div class="carousel">
  <swiper class="swiper-container" [config]="config">
    <div *ngFor="let itemData of carouselData" class="swiper-slide">
      <ng-container *ngTemplateOutlet="carouselItem; context: itemData"></ng-container>
    </div>
  </swiper>
</div>

Ts

import { Component, Input, ViewChild } from '@angular/core';
import { SwiperComponent, SwiperConfigInterface } from 'ngx-swiper-wrapper';

@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.scss']
})
export class CarouselComponent {
  @Input() carouselData: any[];
  @Input() carouselItem: any;
  @Input() config: SwiperConfigInterface = {};

  @ViewChild(SwiperComponent) componentRef: SwiperComponent;

  constructor() {}
}

Module

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { SwiperConfigInterface, SwiperModule, SWIPER_CONFIG } from 'ngx-swiper-wrapper';
import { CarouselComponent } from './components/carousel/carousel.component';

const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {};

const INNER_MODULES = [CommonModule, SwiperModule];

const OUTER_COMPONENTS = [StepperComponent];

@NgModule({
  imports: [...INNER_MODULES],
  declarations: [...OUTER_COMPONENTS],
  exports: [...OUTER_COMPONENTS],
  providers: [
    {
      provide: SWIPER_CONFIG,
      useValue: DEFAULT_SWIPER_CONFIG
    }
  ]
})
export class CarouselModule {}

Usage

Html

<app-carousel [config]="config" [carouselData]="items" [carouselItem]="carouselItem"></app-carousel>

<ng-template #carouselItem let-label="label" let-icon="icon" let-id="id">
  <div class="item-container" (click)="onClick(id)">
    <div class="icon-container"><em [class]="icon"></em></div>
    <p>{{ label | translate }}</p>
  </div>
</ng-template>

Ts

public items: Item[] = [
  { id: '0', icon: 'fas fa-file', label: 'A' },
  { id: '1', icon: 'fas fa-user', label: 'B' },
];

public config: SwiperConfigInterface = {};

public onClick(id: ID) {
  console.log(id);
}

References

• SwiperJs for Angular
• About Me