Расширьте анимацию с помощью Angular внутри mat-tab

Question

Я студент и делаю дипломный проект. У меня есть некоторые проблемы с анимацией Angular. Я объясню ниже ...
Прежде всего, это мой StackBlitz , пожалуйста, посетите его.
Я хочу, чтобы это шоу было только тогда, когда выбранная роль - Студент. См. Изображение ниже
И оно будет скрыто, если роль не выбрана или не соответствует ученику. Смотрите изображение ниже. Но, хотя не отображается, кажется, что его высота (или элемент, который находится в стороне) все еще там, вызывают полосу прокрутки и «пустую» зону

Я пытался чтобы отобразить стиль: нет,

state(
    "out",
    style({
        "max-height": "0px",
        "opacity": "0",
        "visibility": "hidden",
        "display": "none"
    })
),

, но когда я это сделаю, анимация исчезнет. Можете ли вы указать мне, что я там сделал не так?

Примечание: я сталкиваюсь с этой проблемой только тогда, когда помещаю <form> в мат-таб. Когда я оставляю это в покое, код работает нормально. Это StackBlitz

Answer 1

Я нашел решение, добавив css в мой тег <form>

.custom {
  overflow-y: hidden !important;
}