Скрыть / Показать столбец в диалоговом окне Угловой материал

Question

Я показываю диалоговое окно с матом, как показано в коде

Я задал статическую высоту и ширину (Не уверен, что смогу изменить после отображения диалогового окна с матом)

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

Итак,В Mat-диалоге я хочу показать данные в двух столбцах. Один из двух столбцов имеет ширину 150 пикселей, и пользователь хочет показать или скрыть этот столбец при нажатии кнопки (который работает прямо сейчас).

Когда я скрываю столбец, другой столбец расширяется, чтобы охватить пространство150px.

1) Я не хочу, чтобы столбец расширялся при скрытии

2) После скрытия столбца я не хочу показывать пустое пространство (думаю, это сложно)

Я использую контейнер Flex для расширения столбца.

Какой дизайн лучше всего подойдет?

Answer 1

Вам необходимо использовать свойство css видимость для скрытого состояния. Вместо * ngIf или Css display: none, свойство Both удаляет элементы из Dom, и их пространство будет свободно в html. Так что используйте видимость. Это просто скрыть элементы, но Дом не подлежит изменению.

visibility: visible to visibility: hidden;