Как спрятать текст комнонента (Angular 2) в CSS?

Question

[Павел Талайко]

Здравствуйте.
Устанавливается динамически компонент в другой компонент.

<devpav-expansion-panel-content> <--Имеет height: auto; для подстраивания под монтируемый объект-->
    <app-something-component style="height: 100px">
      fwehfiuweiu
    </app-something-component>
  </devpav-expansion-panel-content>

После использую анимацию для компонента <devpav-expansion-panel-content>, которая height: 0 <-> height: * 0.4s.
Все схлопывается, в том числе и компонент <app-something-component>, только вот текст висит и ничего с ним не происходит.

Пример развернутый компонент:


Пример компоненты (<devpav-expansion-panel-content> и <app-something-component>) свернуты:

Answer 1

[Артем Каюн]

Анимировать нужно <app-something-component> и задать хосту этого компонента правило переполнения

:host {
    overflow: hidden;
}

Если у <devpav-expansion-panel-content> высота выставлена в auto, то он автоматом схлопнится после того как схлопнится монтируемый элемент.

Comments

[Павел Талайко]

Спасибо большое.