0

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>
Junior Dev
  • 17
  • 6
  • Please point out what is your problem? Is it that you don't want form controls during editing? – toTheBestOfMyKnowledge Aug 13 '23 at 17:50
  • i want to get popup bootstrap modal screen which i have in navbar component with all form controls and data which i want to edit which is inside display product template table. – Junior Dev Aug 14 '23 at 01:25
  • navbar component is parent and post product component is child component in case of navbar icon click which is bootstrap modal trigger button, bootstrap modal screen popup easily showing post product component template form which is bootstrap modal body content. – Junior Dev Aug 14 '23 at 01:42

0 Answers0