Как добавить диалог для флажка, чтобы показать и скрыть таблицу в угловых?

Question

Я хочу показать и скрыть столбцы таблицы, которые выбираются, когда по щелчку на значке настройки открывается одно диалоговое окно со списком имен столбцов с флажком (не раскрывающимся списком) и в соответствии с установленными флажками или отключенными столбцами.dataSource содержит все данные, возвращаемые из API.

DialogContentExampleDialog.ts

@Component({
    selector: 'dialog-content-example-dialog',
    templateUrl: 'dialog-content-example-dialog.html',
})
@NgModule({ imports: [CommonModule] })

export class DialogContentExampleDialogComponent implements OnInit {
 optionsMap = {
        orderId:{checked: false},
        name: {checked: false},
        email: {checked: false},
        mobile:{checked: false},
        size:{checked: false},
        price:{checked: false},
        status:{checked: false},
        action:{checked: false},
    };
    optionsChecked = [];

    constructor(public thisDialogRef: MatDialogRef<DialogContentExampleDialogComponent>,
         @Inject(MAT_DIALOG_DATA) public data: string) { }
  ngOnInit() {}
  onAdd = new EventEmitter();
  onChange(option, event) {
        this.optionsMap[option] = event.target.checked;
    }
  onCloseConfirm(option) {
    this.onAdd.emit( this.optionsMap[option]);
    this.thisDialogRef.close();
  }
  onCloseCancel() {
    this.thisDialogRef.close();
  }
} 

DialogContentExampleDialogComponent.html

 <div>
 <div class="cancelbtn ">
     <mat-icon  align="end" class="icon-cancel" style="margin-left: 500px;" (click)="onCloseCancel()">cancel</mat-icon></div>
   <h2 mat-dialog-title>MY DIALOG</h2><hr>
   <mat-dialog-content>
      <mat-option *ngFor="let Columns of data;" [value]="Columns">
           <mat-checkbox (change)="onChange(Columns, $event);"> 
                {{Columns.text}}
           </mat-checkbox>
      </mat-option>
 </mat-dialog-content><hr>
 <mat-dialog-actions align="center">
   <button mat-raised-button (click)="onCloseConfirm()">SELECT</button>
      </mat-dialog-actions>
 </div>

.html

<div fxLayout fxLayoutAlign="left left">
 <mat-icon (click)="openDialog()">tune</mat-icon>
 <span>Result:{{dialogResult}}</span>
  </div>
<div class="example-container mat-elevation-z8" #TABLE>
 <table mat-table  [dataSource]="dataSource" class="mat-elevation-z8" matSort matSortActive="orderId" matSortDirection="asc" matSortDisableClear>
  <ng-container [matColumnDef]="column.name" *ngFor="let column of displayedColumns">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column.text}}</th>
  <td mat-cell *matCellDef="let element">
     <a *ngIf="column.name === 'orderId'(click)="onRowClicked(element.orderId)" class="order-link">{{element[column.name]}}</a>
         <span *ngIf="column.name !== 'orderId'">{{element[column.name]}}</span>
 </td>
</ng-container>

 <tr mat-header-row *matHeaderRowDef="getColumnsToDisplay()"></tr>
    <tr mat-row *matRowDef="let row; columns: getColumnsToDisplay();"></tr>
  </table>

  <mat-paginator [length]="resultcount" [pageSize]="10"
                   [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons></mat-paginator>
</div>

.ts

 displayedColumn = new FormControl();
   public displayedColumns = [
      { name: 'orderId', text: 'id'},
      { name: 'name', text: 'Name',},
      { name: 'email', text: 'Email' },
      { name: 'mobile', text: 'mobile no' },
      { name: 'size', text: 'size'},
      { name: 'price', text: 'price' },
      { name: 'status', text: 'Status' },
      { name: 'action', text: 'cancel' }
   ];

   public productDetails: any;
   columnsToDisplay: any[] = this.displayedColumns.slice(0,3);

 getColumnsToDisplay() {
      return this.columnsToDisplay.map(x => x.name);
   }

 openDialog(): void {
     let dialogRef = this.dialog.open(DialogContentExampleDialogComponent,      {    width: '600px',
         data: [
           { name: 'orderId', text: 'id'},
      { name: 'name', text: 'Name',},
      { name: 'email', text: 'Email' },
      { name: 'mobile', text: 'mobile no' },
      { name: 'size', text: 'size'},
      { name: 'price', text: 'price' },
      { name: 'status', text: 'Status' },
      { name: 'action', text: 'cancel' }]
     });
 const sub = dialogRef.componentInstance.onAdd.subscribe((data: any) => {
         console.log(data)
         this.dialogResult = data;
      });
     }
   dialogRef.afterClosed().subscribe(() => {
            sub.unsubscribe();
      });

Если флажок установлен, показывать столбец, в противном случае показывать столбцы по умолчанию.