По умолчанию Angular Material изменяет размеры контейнера только при nav.open, window.resize или при изменении режима nav.Вы должны либо сами инициировать изменение размера контейнера, либо использовать встроенную опцию autosize.Но они советуют вам использовать его на свой страх и риск, потому что это может вызвать проблемы с производительностью.
<mat-sidenav-container class="example-container" *ngIf="shouldRun" autosize> Пример для вашего стекаблица: https://angular -wsvjf8.stackblitz.io
Я проверил в вашем примере, и он работает для меня.Если у вас возникают проблемы с производительностью из-за того, что ваше приложение работает намного больше, чем просто пример (очевидно), вам, возможно, придется инициировать изменение размера самостоятельно с помощью метода toggleMenu.
https://material.angular.io/components/sidenav/overview#resizing-an-open-sidenav
Обновите свой комментарий:
Я не уверен, является ли это правильным способом или нет.На основании того, что я могу найти в коде для опции autosize.Они проверяют поля при каждом цикле обнаружения изменений, поэтому это может вызвать проблемы с производительностью при использовании опции autosize.После этого они вызывают приватную функцию _updateContentMargins и исправляют поля контейнера.
Вы можете использовать ViewChild, получить доступ к MatSidenavContainer и вызвать эту функцию в вашем toggleMenu.Но поскольку сама функция _updateContentMargins является закрытой, я бы ее не использовал.Лично я не могу придумать другой способ сделать это.
Вот рабочий пример вызова _updateContentMargins внутри вашего toggleMenu: https://stackblitz.com/edit/angular-segnwt
Я использую setTimeoutздесь _ngZone из MatSidenavContainer теперь также стал приватным.