How to destroy "dynamic lightgallery" instance so that none of its reference appear on another angular component

Question

I am using angular 6 with laravel 5.2 as backend.

I have two angular component which is using lightGallery this one :

• componentOne
• componentTwo

In lightgallery there is option to hit like for the current zoomed image, When we are on componentOne and hit like button, it inserts the "db table" image like's data correctly, but when we navigate to componentTwo and hit like on image, then it records two entry, One entry belongs to componentOne and other entry of componentTwo

In short, componentTwo also records the componentOne like data.

I want to clear all the lightgallery data on ngDestroy() so that it doesn't interfere on componentTwo.

Both the component's codes are same. I am sharing one component's lightgallery code.

import { Component, OnInit, AfterViewInit, ElementRef,OnDestroy } from '@angular/core';
import { environment } from '../../../../../../environments/environment';

declare var $:any;

@Component({
  selector: 'app-album-details',
  templateUrl: './album-details.component.html',
  styleUrls: ['./album-details.component.css']
})

export class AlbumDetailsComponent implements OnInit,OnDestroy {

 constructor() {
        
 }

  ngAfterViewInit(){ 
       // Having list of images
       let details = {type:'paid'};
       this.editAlbumFn("album_list", details);
  }

  ngOnDestroy(){
    console.log('destroy album details');    
    // Can destroy lightgallery here
  }

editAlbumFn(url, object) {
this.requestService.postMethod(url,object) 
    .subscribe(
        (data : any) => {
            if (data.success == true) {
              this.albums = data.data[0];
              this.album_details = data.data;
              console.log(this.album_details);

             // It filters our image data for the dynamic lightgallery
              this.galleryImages = this.album_details.map(item => {
                const images = {};
                images['item_id']  = item.item_id;
                images['subHtml']  = "<div class='fb-comments'></div>";

                if(item.type=='VIDEO') {
                  images['thumb']    = '/assets/img/video-icon.png';
                  images['html'] = '<video class="lg-video-object lg-html5" controls preload="none"><source src="'+item.video+'" type="video/mp4">Your browser does not support HTML5 video</video>'
                } else {
                  images['src']      = item.photo;
                  images['thumb']    = item.thumb;
                }

                return images;
              })

             // Help to initialize the lightgallery
              this.activateLightbox(this.galleryImages, this.model_id);

            } else {
                this.toast_message("Error", data.error_messages);                    
            }
        },

        (err : HttpErrorResponse) => {
            this.errorMessages = 'Oops! Something Went Wrong';
            this.toast_message("Error", this.errorMessages);
        }
    );
}

activateLightbox(galleryImages: any, model_id) {

    var galleryImag =  galleryImages;
    var user_id, post_id;

    setTimeout(() => {

    
        // each .item class is a bootstrap grid  
        var $commentBox = $(".item");
               
        $commentBox.on('click', function (e) {

         // Used this to destroy the previous component lightgallery data
          if($(this).data('lightGallery')) {
            console.log('destroy');            
            $(this).data('lightGallery').destroy(true);
          }

          $(this).lightGallery({
              selector: '.item',
              appendSubHtmlTo: ".lg-item",
              addClass: "fb-comments",
              mode: "lg-fade",
              thumbnail:true,
              animateThumb: true,
              showThumbByDefault: true,
              enableDrag: false,
              enableSwipe: false,
              dynamic: true,
              index: $(this).data('gallery-index'),
              dynamicEl: galleryImag
            });        
        });

        $commentBox.on("onAfterSlide.lg", function (event, prevIndex, index) {
          post_id = $("#post_" + index).val();
          user_id = (localStorage.getItem('userId') != '' && localStorage.getItem('userId') != null && localStorage.getItem('userId') != undefined) ? localStorage.getItem('userId') : '';
          
          if (!$(".lg-outer .lg-item").eq(index).attr("data-fb")) {
            try {
              $(".lg-outer .lg-item").eq(index).attr("data-fb", "loaded");

              $.get(environment.apiUrl + 'comments/' + post_id + '/album/' + model_id, {user_type:'MODEL'}, function(data){
                $('.lg-loaded .fb-comments').html('');
                $('.lg-loaded .fb-comments').html(data);
                
                
                  $(".lg-outer.fb-comments .fb-comments").css('background', '#fff no-repeat scroll center center');
                
              });
              // FB.XFBML.parse();
             
            } catch (err) {
              $(window).on("fbAsyncInit", function () {
                $(".lg-outer .lg-item").eq(index).attr("data-fb", "loaded");
                // FB.XFBML.parse();
                console.log('catch block');
              });
            }
          }
        });
    }, 3000);

      
      $('body').on('click', '.s_likeIconFI', function(){

            console.log("component name");

            $.ajax({
            type:'POST',
            url: environment.apiUrl + 'postLike/' + post_id + '/album',
            data:'user_id='+user_id+'&user_type=MODEL',
            success:function(data) {
                $('div.lg-current .commentLikeDetails').html('');
              $('div.lg-current .commentLikeDetails').html(data.text);
              $('.likeValue').html('');
              $('.likeValue').html(data.like);
              $('.s_likeIconFI').hide();
              $('.showLikes').css("display", "block");
            }
          })
      });

}

Please help in resolving this. Thanks.