Modal form is not opening

Question

Hi

  When i click on Add Modal is not opening. Below is the Dynamic Table Component HTML.

              <li class="tbl-header-btn">
                <div class="m-l-10" matTooltip="ADD">
                  <button mat-mini-fab color="primary" (click)="openDialog($event)">
                    <mat-icon class="col-white">add</mat-icon>
                  </button>
                </div>
              </li>

openDialog($event:Event){
    this.openModal.emit($event);
    debugger;
  }

  <ng-template #content let-data>  
    <div mat-dialog-title>
        <h4> Product Form </h4> 
    </div>
  
    <form [formGroup]="frmEmployee" 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