Hide/Show column in Angular material mat-dialog

Question

I am showing mat-dialog as show in the code

I gave height and width static(Not sure if I can change after showing Mat-dialog)

 const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = false;
dialogConfig.height = '700px';
dialogConfig.width = '700px';    
this.dialog.open(etailsComponent, dialogConfig);

So, In Mat-dialog, I want to show data in two columns. One of the two columns is of width 150px and user wants to show or hide this column on button click(which is working right now).

When I hide the column, the other column will expand to cover the space of 150px.

1) I don't want the column to be expand on hide

2) After column hide, I dont want to show the empty space.(I think this is tricky)

I am using Flex container to expand the column.

What would be the best design?

Answer 1

You need to use css property visibility to hidden state. Rather than *ngIf or Css display: none, Both property removes elements from Dom and space of those would be free on html. So use visibility. This is just hide elements, but Dom is not changable.

visibility: visible to visibility: hidden;