Dynamic Angular Table

Question

 

Hi

  I have below code . I want when user Clicks on Add Modal popup should open which has been defined in a Child component.

Dynamic Table is a separate component

<div class="card">
  <div class="materialTableHeader">
     <div class="right">
            <ul class="tbl-export-btn">
              
              <li class="tbl-header-btn">
                <div class="m-l-10" matTooltip="ADD">
                  <button mat-mini-fab color="primary"  >
                    <mat-icon class="col-white">add</mat-icon>
                  </button>
                </div>
              </li>
</ul>
</div>
</div>
</div>

  <ng-template #content let-data>  
    <div mat-dialog-title>
        <h4> Product Form </h4> 
    </div>
  
    <!-- <form [formGroup]="frmProduct" ngSubmit="Save()">  -->
        <!-- <form ngSubmit="Save()"></form> -->
        <div mat-dialog-content class="content">
            <div class="row">
                <mat-form-field appearance="outline">
                    <mat-label>Product Name</mat-label>
                    <input matInput type="text" appAlphanumeric formControlName="ProductName">
                    <!-- <mat-error *ngIf="frmProduct.get('ProductName')?.invalid && (frmProduct.get('ProductName')?.touched || frmProduct.get('firstName')?.dirty)">
                        <span *ngIf="empForm.get('firstName')?.errors?.['required']">This is required</span>
                        <span *ngIf="empForm.get('firstName')?.errors?.['minlength']">Minimum length is 4</span>
                    </mat-error> -->
                </mat-form-field> 
                <mat-form-field appearance="outline">
                    <mat-label>Product Description</mat-label>
                    <input matInput type="text" appNumeric formControlName="ProductDescription">
                </mat-form-field> 
                <mat-form-field appearance="outline">
                  <mat-label>Product Image</mat-label>
                  <input matInput type="text" appNumeric formControlName="ProductImageUrl">
              </mat-form-field> 
            </div>
        </div>
        <div mat-dialog-actions class="action">
            <button mat-raised-button color="warning">Cancel</button>
            <button mat-raised-button color="primary" (click)="onSave()">Save</button> 
        </div>
    <!-- </form>  -->
  </ng-template> 

Thanks