одушевленная ширина родителей на ребенкеугловая

Question

Я хочу анимировать ширину родительского контейнера, когда дочерние компоненты появляются / исчезают на * ngIf

Я знаю, как анимировать дочерний компонент на * ngIf, который я уже настроил:

animations: [loadingEnter]

loadingEnter = trigger('loadingEnter', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('300ms', style({ opacity: 1 })),
  ]),
]);

<div class="parent">
  <div *ngIf="myCondition"></div>
  <div *ngIf="!myCondition"></div>
</div>

Дочерний объект анимируется должным образом, но id хотел бы, чтобы родительский элемент плавно рос, когда дочерние элементы появляются / исчезают.

Дочерние элементы имеют динамическую ширину, поэтому я не могу установить ширину родительского элемента.и переход css по ширине.

Есть идеи?Спасибо!