Please add Docs for usage with Angular

[SvenBudak]

I have really issues to understand how to use swiper in a clean way with angular. is there a update planed to add also a doc for usage with Angular beside vue, react etc?

[chrisdziewa]

@SvenBudak There used to be Angular support, but this was removed in favor of Swiper Element and I believe the other frameworks mentioned will also have support phased out. I have had to change my implementation quite frequently over the past year or 2 to use this with Angular. I recommend creating a separate module for your slider. At the top, add import { register as registerSwiperSlider } from "swiper/element/bundle"; registerSwiperSlider(); and in your @NgModule declaration, add a schemas property to support swiper-container and swiper-slide:

schemas: [CUSTOM_ELEMENTS_SCHEMA]

Under usage in the swiper element docs, you will find the template code necessary. Make the swiper-container opening tag look like this:

<swiper-container #swiper init="false" class="swiper-wrapper swiper">

And here is an example ts:

@Component({
    selector: "app-slider",
    templateUrl: "./slider.component.html",
    styleUrls: ["./slider.component.scss"]
})
export class SliderComponent implements AfterViewInit {
    @ViewChild("swiper", { static: false }) swiper: ElementRef;

    public swiperParams: any = {
        direction: "horizontal",
        spaceBetween: 30,

        pagination: { clickable: true, enable: true },
        loop: false
    };

    constructor() {}

    ngAfterViewInit(): void {
        Object.assign(this.swiper.nativeElement, this.swiperParams); // Attach config
        // @ts-ignore
        this.swiper.nativeElement?.initialize(); // After this runs, no changes can be made to swiper, so assign any listeners and configuration beforehand
    }
}

Hope this helps point you in the right direction.

[netin17]

I am gettting this error this.swiper.nativeElement?.initialize() is not a function