By using bootstrap modal i'm posting data on that same screen i'm trying to get data for edit with respect to id by using angular and rest API

Question

I'm using Angular v.14 and rest api,i have bootstrap modal in navbar component its trigger button is in navbar and it's rest part is under the navbar and its modal body content is in post-product component template from that i am posting data to rest api,and i'm displaying list of products in display-product component by using table here i have edit button by clicking on that edit button i want to get bootstrap popup screen whose trigger button is inside navbar component template display edited data into bootstrap modal screen but instead of showing "bootstrap modal screen" with edited data its only showing form controls on the full page without bootstrap modal screen with edited data,I tried to solve that but i can't solve it,below is my code if i can't solve it in that way as i was trying to do then please help me that how i can solve it in another way.

display-product component template and ts file code

<td>
    <a class="a-trash" (click)="editClick(item.id)">
        <i class="fa-solid fa-pen-to-square fa-xl"></i>
    </a>
    <a class="a-trash">
        <i class="fa fa-trash fa-xl"></i>
    </a>
</td>
**ts file code**
editClick(productId:number){
    console.log("edit");
    this.router.navigate(['/admin/edit', productId]); 
  }

post-product component

  @Input() product: Product;
  @Input() selectedProduct: Product;

this.route.paramMap.subscribe(params => {
      const productId = +params.get('id')!;
      if (productId) {
        this.getProduct(productId);
      }
getProduct(id: number) {
    this.prodService.getProduct(id).subscribe((product: Product) => {
      this.selectedProduct = product;
      this.editProduct();
      //this.editProduct(this.selectedProduct)
    });
  }
editProduct() {
    this.productForm.patchValue({
      name: this.selectedProduct.name,
      price: this.selectedProduct.price,
      description: this.selectedProduct.description,
      category: this.selectedProduct.category
    });
  }
addProduct() {
  Here from i'm posting product to rest api 
}
**In its template i have form which is bootstrap modal body**

<form [formGroup]="productForm" (ngSubmit)="addProduct()">
   Here i have form controls for data
<form>

navbar component template

**modal trigger icon**
<li class="nav-item">
   <a class="nav-link text-white" data-toggle="modal" data-target="#modelId" 
      (click) = "addClick()" >
   <i class="fa-solid fa-rectangle-ad fa-2xl"></i> </a>
</li>


<div class="modal fade" id="modelId" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Post Product</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <app-post-product [product]="product" [selectedProduct]="selectedProduct"></app-post-product>
            </div>
        </div>
    </div>
</div>