при вызове register() из веб компонента Swiper происходит бесконечный вызов жизненого цикла компонента Angular

моя проблема заключается в том что при попытке вызвать register в коде TS у меня происходит бесконечное количество вызовов компонента. По логике компонент перерисовывается когда в нем или в него посылают изменения, но изменения не происходят, а вместо этого идут бесконечные вызовы следовательно из-за этого страница сайта начинает виснуть отслеживаю если что через AngularDevTools.

код TS:

import { Component, Input, OnInit, OnDestroy, AfterViewInit, ViewChild, ElementRef, ChangeDetectorRef} from '@angular/core'
import { catchError, delay, EMPTY, map, of, retry, Subject, switchMap, takeUntil, tap } from 'rxjs'
import { MessagesErrors } from 'src/app/enums/messages-errors'
import { MessagesAuth } from 'src/app/enums/messages-auth'
import { AuthService } from 'src/app/services/auth.service'
import { EventsService } from 'src/app/services/events.service'
import { ToastService } from 'src/app/services/toast.service'
import { environment } from 'src/environments/environment'
import { VkService } from 'src/app/services/vk.service'
import { IonicSlides } from '@ionic/angular'
import { DomSanitizer } from '@angular/platform-browser'

import {register} from 'swiper/element/bundle'
import {Swiper} from 'swiper/types'
import { SightsService } from 'src/app/services/sights.service'
import { CommentsService } from 'src/app/services/comments.service'

@Component({
  selector: 'app-event-card',
  templateUrl: './event-card.component.html',
  styleUrls: ['./event-card.component.scss'],
})
export class EventCardComponent implements OnInit, OnDestroy, AfterViewInit  {
  constructor(
    private authService: AuthService,
    private eventsService: EventsService,
    private sightsService: SightsService,
    private commentsServices: CommentsService,
    private toastService: ToastService,
    private vkService: VkService,
    private cdr: ChangeDetectorRef,
    private sanitizer:DomSanitizer,
  ) { }
  
  private readonly destroy$ = new Subject<void>()

  @Input() callFromCabinet: boolean = true
  @Input() event!: any
  @Input() isSight: boolean = false
  comments: boolean = false

  @ViewChild('swiper')
  elementRef?: ElementRef
  viewElement: boolean = false
  viewElementTimeStart: number = 0
  viewElementTimeEnd: number = 0

  swiperRef: ElementRef | undefined
  swiper?: Swiper
  swiperCurrentSlide?: number
  swiperTotalSlids?: number

  swiperModules = [IonicSlides]

  userAuth: boolean = false

  host: string = environment.BACKEND_URL
  port: string = environment.BACKEND_PORT

  favorite: boolean = false
  loadingFavotire: boolean = false

  like: boolean = false
  loadingLike: boolean = false
  startLikesCount: number = 0
  vkLikesCount: number | null = null
  //windowComment: boolean = false

  



  
  ngOnInit() {
    register()
    this.userAuth = this.authService.getAuthState()
    this.startLikesCount = this.event.likes ? this.event.likes.vk_count + this.event.likes.local_count : 0
    this.favorite = this.event.favorites_users_exists! 
    this.like = this.event.liked_users_exists!
    // window.addEventListener('scrollend', this.scrollEvent, true);

    //КИдаем запрос в ВК чтобы обновить лайки и лайкнуть у нас если юзер лайкнул в ВК
    if(this.event.vk_group_id && this.event.vk_post_id){
      this.getVkEventLikes(this.event.vk_group_id, this.event.vk_post_id)
      this.isLikedUserVKEvent(this.event.vk_group_id, this.event.vk_post_id)
    }
    
    
  }

  ngAfterViewInit(): void {
    register()

    this.swiper = this.swiperRef?.nativeElement.swiper
    setTimeout(() => {
      this.swiperCurrentSlide = this.swiper?.realIndex! + 1
      this.swiperTotalSlids =  this.swiper?.slides.length 
      this.swiper?.autoplay.start()
      ,1000
    }) // Без этого костыля автоплей работает только в первой карточке

    this.swiper?.on('slideChange', () => {
      this.swiperCurrentSlide = this.swiper?.realIndex! + 1
    })
    
    this.cdr.detectChanges()
  }

  

код HTML:

    <ion-card>
  <!-- ['/sights', event.id] - было лень переделывать поэтому тут event.id подразумевает ид места, так как компонент универсальный и можно передать место -->
  <div class=" ripple-parent rectangle" >
    <swiper-container 
      [routerLink]="isSight ? ['/sights', event.id] : ['/events', event.id]"
      #swiper
      [modules]="swiperModules" 
      
      autoplay-disableOnInteraction="false"
      [followFinger]="false" 
      [loop]="true" 
      [initialSlide]="0" 
    > 

      <ng-container *ngIf="event.files; else notFiles">
        <ng-container *ngFor="let file of event.files">
          <swiper-slide *ngIf="file.local === 1 && file.file_types[0].name === 'image'">
            <ion-img style="background-image: url('{{host}}:{{port}}{{ file.link }}');"/>
            <img alt="{{file.name}}" src="{{host}}:{{port}}{{ file.link }}" style="z-index: 10;" />
          </swiper-slide>
          <swiper-slide *ngIf="file.local === 0 && file.file_types[0].name === 'image'">
              <ion-img  style="background-image: url('{{ file.link }}');"/>
              <img alt="{{file.name}}" src="{{ file.link }}" style="z-index: 10;"/>
          </swiper-slide>
          <swiper-slide *ngIf="file.local === 0 && file.file_types[0].name === 'video'">
            <iframe [src]="file.link + '&autoplay=1&mute=1'|safeVideoByUrl" allow="encrypted-media; fullscreen; picture-in-picture;" autoplay width="100%" height="100%" frameborder="0"></iframe>
          </swiper-slide>
        </ng-container>
      

</ion-card>