Angular 12 Material MatDialogConfig shadows on parent window does not disappear when close popup windows

Question

I am using Angular 12 with Material... I have a main page with a mat-table.

In the HTML I have an Edit() button inside the table and a create() button outside the table.

This is the call .ts in the to the popup Windows. In both cases I call the same function.

 callDialog(id:any)
  {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.width = "60%";
    dialogConfig.data=id;
    dialogConfig.backdropClass= 'bdrop';
    const dialogRef  =  this.dialog.open(NotificationDetailComponent,dialogConfig);

    dialogRef.afterClosed().subscribe(result => {
      this.NotificationService();
    });
  }

create() {
    this.callDialog(null);
    }


edit(id:string){
    this.callDialog(id);
  }

When I open the dialog window, the parent window has a shadow. When I close the popup windows, OnEdit (the button is inside the table), the shadow disappear and all come back to normal. But when I click onCreate() button and then close the popup window, the shadows does not disappear.

In other words.. the shadows in the parent window does not disappear if the button is outside the table..

I tested adding the Create() button inside the table and it works fine...

this is my HTML

<connector-card [title]="cardTitle">
</connector-card>
<div class="search-div">
  <button mat-raised-button (click)="create()">
    <mat-icon>add</mat-icon>Create
  </button>
  <mat-form-field class="search-form-field" floatLabel="never" >
    <input matInput [(ngModel)]="searchKey" placeholder="Search" autocomplete="off" (keydown.enter)="search()">
    <button mat-button matSuffix mat-icon-button aria-label="Clear" *ngIf="searchKey" (click)="delete()">
    <mat-icon>close</mat-icon>
  </button>
  </mat-form-field>
</div>

<div class="mat-elevation-z8">
  <mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="Active">
      <mat-header-cell *matHeaderCellDef>Active</mat-header-cell>
      <mat-cell *matCellDef="let not">{{not.Active}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="NotificationName" >
      <mat-header-cell *matHeaderCellDef mat-sort-header>Notification Name</mat-header-cell>
      <mat-cell *matCellDef="let not">{{not.NotificationName}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="ProcessorName" >
      <mat-header-cell *matHeaderCellDef mat-sort-header>Processor Name</mat-header-cell>
      <mat-cell *matCellDef="let not">{{not.ProcessorName}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="ChannelAndLevel">
      <mat-header-cell *matHeaderCellDef  mat-sort-header>Channel & Level</mat-header-cell>
      <mat-cell *matCellDef="let not">{{not.ChannelAndLevel}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="edit">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let not">
        <button mat-icon-button matTooltip="Click to Edit"  color="primary" (click)="edit(not.Id)">
          <mat-icon>edit</mat-icon>
        </button> </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row;columns:displayedColumns"></mat-row>
  </mat-table>
  <mat-paginator #paginator [length]="tablePaging.totalRows" [pageIndex]="tablePaging.pageNum" [pageSize]="tablePaging.pageSize" showFirstLastButtons
    [pageSizeOptions]="tablePaging.pageSizeOptions" (page)="pageChanged($event)" aria-label="Select page">
  </mat-paginator>
</div>

Here is the windows

Another thing I notice if I change the style using

dialogConfig.backdropClass= 'bdrop';

.bdrop {
  background-color: #bbbbbbf2;
  backdrop-filter: blur(4px);
}

th shadows appears before I open the popup windows, and once opened, the shadow disappears.. But OnCreate() the shadows appears again when I close the opoup windows.

What I am missing?

Answer 1

I had defined my Create button like this

<button mat-raised-button (click)="create()">
    <mat-icon>add</mat-icon>Create
  </button>

I changed the definition like this

   <button (click)="create()">
        <mat-icon>add</mat-icon>Create
      </button>

I removed

mat-raised-button

and now it works fine... Do not know why...