how to destroy the ngx-swiper-wrapper in angular 8

Question

I need to destroy the ngx-swiper-wrapper in mobile device how to do that

<div class="swiper-container" [swiper]="config">
<div class="swiper-wrapper">
 <div class="swiper-slide">1</div>
<div class="swiper-slide">2</div>
<div class="swiper-slide">3</div>
<div class="swiper-slide">4</div>
<div class="swiper-slide">5</div>
</div>
</div>

my ts file code

    @ViewChild(SwiperDirective) swiperView: SwiperDirective;
    public config: any;
constructor(public hierarchyService: HierarchyMaintenanceService) { 
    this.swiperConfig();
  }
    this.swiperView.config = {
      init: true,
    };
swiperConfig = () => {
    this.config = {
          direction: 'horizontal',
          effect: 'slide',
          slidesPerView: 3,
          breakpoints: {
            768: { slidesPerView: 2 },
            940: { slidesPerView: 3 }
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }
        }
}

how to destroy the swiper in mobile device

do you need to remove the wrapper div and keep all childs or the wrapper and wrapper content? — JSmith, Oct 14 '20 at 11:47

score 0 · Accepted Answer · answered Oct 14 '20 at 11:56

I would make usage of ElementRef and Renderer2to do that

import { Renderer2, ElementRef } from '@angular/core'

...

constructor(private renderer:Renderer2, private el:ElementRef){

}

removeWrapper():void{
  const wrapper = this.el.nativeElement.querySelector('.swiper-wrapper')
  const parent = this.renderer.parentNode(wrapper);
  this.renderer.removeChild(parent, wrapper);
}

how to destroy the ngx-swiper-wrapper in angular 8

1 Answers1