angularweb-componentswiper.jscustom-element

How to use swiper 9 with angular


I'm actually migrating to Angular 15 and saw that swiper 9 was out.

It's written that a simple npm i swiper and that it should work, since

Custom elements are supported in all major browser and by almost every framework.

But I'm a bit lost since I cannot import it in the module anymore

Does somebody knows how to use the latest v9.0.0^ swiper version with angular ?


Solution

  • In AppModule add:

    import {register} from 'swiper/element/bundle';
    
    register();
    

    Create a Directive

    import {AfterViewInit, Directive, ElementRef, Input} from '@angular/core';
    import {SwiperOptions} from "swiper";
    
    @Directive({
      selector: '[fmSwiper]',
      standalone: true,
    })
    export class SwiperDirective implements AfterViewInit {
    
      private readonly swiperElement: HTMLElement;
    
      @Input('config')
      config?: SwiperOptions;
    
      constructor(private el: ElementRef<HTMLElement>) {
        this.swiperElement = el.nativeElement;
      }
    
      ngAfterViewInit() {
        Object.assign(this.el.nativeElement, this.config);
        
        // @ts-ignore
        this.el.nativeElement.initialize();
      }
    }
    

    In your Component ts File add

    schemas: [CUSTOM_ELEMENTS_SCHEMA]
    

    Set your Swiper configuration.

    Example:

    import {Component, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation} from '@angular/core';
    import {CommonModule} from '@angular/common';
    import {MainHeadingComponent} from "../main-heading/main-heading.component";
    import {StreamItemComponent} from "./stream-item/stream-item.component";
    import {A11y, Mousewheel, Navigation, Pagination, SwiperOptions} from 'swiper';
    import {SwiperDirective} from "../../directives/swiper.directive";
    
    @Component({
      selector: 'fm-streams-swiper',
      standalone: true,
      encapsulation: ViewEncapsulation.None,
      imports: [
        CommonModule,
        MainHeadingComponent,
        StreamItemComponent,
        SwiperDirective
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      templateUrl: './streams-swiper.component.html',
    })
    export class StreamsSwiperComponent {
    
      sliders: string[] = [
        'Test 1',
        'Test 2',
        'Test 3',
        'Test 4',
        'Test 5',
        'Test 6',
        'Test 7',
        'Test 8',
        'Test 9',
      ]
    
      public config: SwiperOptions = {
        modules: [Navigation, Pagination, A11y, Mousewheel],
        autoHeight: true,
        spaceBetween: 20,
        navigation: false,
        pagination: {clickable: true, dynamicBullets: true},
        slidesPerView: 1,
        centeredSlides: true,
        breakpoints: {
          400: {
            slidesPerView: "auto",
            centeredSlides: false
          },
        }
      }
    }
    

    And the HMTL File:

      <swiper-container fmSwiper [config]="config" init="false" class="w-full">
        <swiper-slide class="w-[310px] sm:w-[450px] pb-6"
             *ngFor="let slider of sliders">
          <fm-stream-item></fm-stream-item>
        </swiper-slide>
      </swiper-container>
    

    This is my solution for the moment. Happy to hear better ways to implement the new Version of Swiper in Angular :-)

    Swiper Element: Core Version & Modules