🌀 How to Dynamically Update Swiper Language Direction (RTL / LTR) in Angular?

[AsmaaMK]

📋 Problem

I'm using Swiper Element in an Angular component and I want to dynamically update the swiper's direction based on the current language ('ar' for RTL, 'en' for LTR) using a LangService.

The swiper works fine initially, but when the language is changed at runtime, the Swiper layout breaks (e.g. wrong direction, wrong navigation, broken layout).

📂 Code

swiper.component.html

<swiper-container #swiperContainer init="false" class="h-100">
  @for (product of [].constructor(9); track $index) {
  <swiper-slide>
    <app-small-product-card />
  </swiper-slide>
  }
</swiper-container>

swiper.component.ts

import {
  Component,
  CUSTOM_ELEMENTS_SCHEMA,
  effect,
  ElementRef,
  inject,
  Input,
  ViewChild,
} from '@angular/core';
import { SmallProductCardComponent } from '../small-product-card/small-product-card.component';
import { ButtonIconComponent } from '../button-icon/button-icon.component';
import { TranslateModule } from '@ngx-translate/core';
import { Navigation, Autoplay } from 'swiper/modules';
import { SwiperOptions } from 'swiper/types';
import { register } from 'swiper/element';
import { LangService } from '../../../core/services/lang.service';
import { NgClass } from '@angular/common';

@Component({
  selector: 'app-mini-product-swiper',
  imports: [
    SmallProductCardComponent,
    ButtonIconComponent,
    TranslateModule,
    NgClass,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  templateUrl: './mini-product-swiper.component.html',
  styleUrl: './mini-product-swiper.component.scss',
})
export class MiniProductSwiperComponent {
  lang = inject(LangService).currentLang;

  @Input({ required: true }) swiperClass = '';
  @Input() swiperBreakpoints = {
    0: {
      slidesPerView: 2,
    },
    568: {
      slidesPerView: 3,
    },
    892: {
      slidesPerView: 2,
    },
    1150: {
      slidesPerView: 3,
    },
  };

  @ViewChild('swiperContainer') swiperContainer!: ElementRef;

  constructor() {
    effect(() => {
      const lang = this.lang();
      if (lang === 'ar') {
        // update swiper direction to rtl
      } else {
        // update swiper direction to ltr
      }
    });
  }

  ngOnInit(): void {
    // register Swiper Element
    register();
  }

  ngAfterViewInit(): void {
    this.assignSwiperParams();
  }

  assignSwiperParams() {
    const swiperElement = this.swiperContainer.nativeElement;
    const swiperParams: SwiperOptions = {
      modules: [Navigation, Autoplay],
      slidesPerView: 1,
      spaceBetween: 16,
      speed: 500,
      loop: false,
      grabCursor: true,
      navigation: {
        nextEl: `.${this.swiperClass}-button-next`,
        prevEl: `.${this.swiperClass}-button-prev`,
      },
      autoplay: {
        delay: 2500,
        disableOnInteraction: true,
      },
      breakpoints: this.swiperBreakpoints,
    };

    // now we need to assign all parameters to Swiper element
    Object.assign(swiperElement!!, swiperParams);

    // and now initialize it
    swiperElement?.initialize();
  }
}

❓ Question

How can I update the Swiper direction ('rtl' or 'ltr') dynamically after the language is changed?

• Do I need to destroy and re-initialize the Swiper?
• Is there a way to re-assign the direction param and re-render without breaking the layout?
• What’s the recommended approach when using in Angular?

💬 Any help or working example would be greatly appreciated. Thank you!