How to play video when slide changed ionic slides

Question

I'm trying to reproduce TikTok behaviour for my video slide. I'm using ionic-slides which uses swiper library under the hood and videogular2 library to control the video.

So, for now, I have a slider with 3 slides. Each slide contains a video component. And what I need is autoplay first video when it is ready and then play next video on slide changed and stop the video from the previous slide.

in my feed.component.html I have next markup

<ion-slides pager="true" [options]="feedSliderOptions"
                (ionSlideTransitionEnd)="slideChanged($event)">
        <ion-slide class="item-slide" *ngFor="let item of (itemsFeed | async)">
            <app-video-player [item]="item">
            </app-video-player>
        </ion-slide>
</ion-slides>

in my feed.component.ts

export class FeedPage implements OnInit {
  public itemsFeed: Observable<any[]>;
  public activeElementNotInViewport: boolean;
  public feedSliderOptions = {
    grabCursor: true,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
    direction: 'vertical',
    pagination: {
      renderBullet: () => null
    },
    on: {
      beforeInit() {
        console.log('before slide initiated');
      },
    }
  };

  constructor(private feedService: FeedService,
              private videoService: VideoService) {
  }

  ngOnInit(): void {
    this.itemsFeed = this.feedService.getHotFeed();
  }

  public slideChanged(event) {
    const slideIndex = event.target.swiper.activeIndex;
    this.videoService.playingVideoIndex.next(slideIndex);
    console.log(slideIndex);
    console.log(event);
  }
}

app-vide-player.component.html contains

<div class="video-holder">
  <vg-player (onPlayerReady)="onPlayerReady($event)">
    <video [vgMedia]="media" #media [id]="'video-' + item.id"
           [poster]="item.previewImage">
      <source [src]="item.videoUrl" type="video/mp4">
    </video>
  </vg-player>
</div>

and app-vide-player.component.ts contains

export class AppVideoPlayerComponent implements OnInit, OnDestroy {
  @Input()
  public item: any;
  public videoIsPlaying: boolean;
  public vgAPI: VgAPI;
  public media: VgMedia;
  @ViewChild('videoPlayer', { static: false }) videoPlayer: ElementRef;
  @Output()
  private videoCanPlay: EventEmitter<any> = new EventEmitter<any>();
  private unsubscribeNotifier: Subject<any> = new Subject<any>();
  private prevActiveIndex: number;

  constructor(private videoService: VideoService) {}

  ngOnInit() {
    console.log('video inited');
  }

  ngOnDestroy(): void {
    this.unsubscribeNotifier.next();
    this.unsubscribeNotifier.complete();
    console.log('destroyed');
  }

  public onPlayerReady(api: VgAPI) {
    this.vgAPI = api;
    this.vgAPI.subscriptions.ended.subscribe(isEnded => {
      if (isEnded) {
        this.vgAPI.play();
      }
    });
    this.vgAPI.subscriptions.pause
      .pipe(
        takeUntil(this.unsubscribeNotifier)
      )
      .subscribe(isPaused => {
      console.log('isPaused');
    });
    this.vgAPI.subscriptions.playing
      .pipe(
        takeUntil((this.unsubscribeNotifier))
      )
      .subscribe(isPlaying => {
      console.log('isPlaying');
    });
  }

  public playVideo() {
    this.videoIsPlaying = !this.videoIsPlaying;
    this.vgAPI.play();
  }
}

How should I connect the video player component and his parent feed page component to handle change event and play/pause the needed video? Should I do it through a service or...? Any ideas/suggestions?