how to set dynamically startPosition of owl carousel in angular 11?

I want to set dynamically startPosition of angular(11) owl carousel. I’m using owl carousel in model and data get from api. I set customeoptions like below :

 customOptions: OwlModule = {
    loop: false,
    mouseDrag: true,
    touchDrag: true,
    pullDrag: false,
    dots: false,
    navSpeed: 700,
    navText: ['&#8249', '›'], 
    startPosition: this.sPosition,
    margin:30,
    responsive: {
      0: {
        items: 1 
      },
      400: {
        items: 1
      },
      740: {
        items: 1
      },
      940: {
        items: 1
      }
    },
    nav: true
  }

I have set startPosition with global variable but not change startPosition in customOptions.I’m getting data position through index of loop.

scenario like when click on image then open model with owl carousel and calling new api for getting specific image.

Code :

show(id:number,i:number)
  {
    this.sPosition = i;
    console.log("start :; " +  JSON.stringify(this.customOptions));
    this.galleryService. getGalleryView(id).subscribe(
      response =>{
        this.modelGallery = response;
        this.getGalleryData1();
        this.images = response;
      }, error =>{
        console.log("model error :: " + error)
      });
  }

owl-carousel code:

<owl-carousel [options]="customOptions" [items]="images" [carouselClasses]="['owl-theme', 'sliding']" [id]="images.id">
  <div class="item" *ngFor="let img of images">
    <img style="height: 260px;width:100%;object-fit: cover;"
       src='{{"assets/images/" + img.image}}' [alt]="img.name" [title]="img.name" />
      <div class="card-body">
           <h5 class="card-title">{{img.name}}</h5>
           <p class="card-text">{{img.description}}</p>
      </div>
   </div>
</owl-carousel>

I also try to set data like below :

    this.sPosition = i;
    this.mdata = JSON.stringify(this.customOptions);  
    console.log("With Stringify :" , this.mdata);  
      // Parse from JSON  
    this.parsedJson = JSON.parse(this.mdata);  
    this.parsedJson.startPosition = this.sPosition;
    console.log("With Parsed JSON :" , this.parsedJson.startPosition);  
    console.log("start : " +  JSON.stringify(this.customOptions));

It is updating data in this.parsedJson.startPosition but not update in startPosition of carousel.

I don’t understand why data was not updating in startPosition.

Please suggest how can I set it dynamically ?

Sorry for poor English.

Thanks in advance.

Source: AngularJS Questions