Блог

Я создаю свой собственный угловой компонент (что-то похожее на ‘card’), где пользовательские компоненты будут выглядеть примерно так:

 <app-my-card>
   <app-my-card-header>
   </app-my-card-header>
   <app-my-card-body>
   </app-my-card-body>
   <app-my-card-footer>
   </app-my-card-footer>
<app-my-card>
  

Компонент app-my-card будет иметь атрибуты ‘height’ и ‘width’.
Как я могу задать стиль, чтобы компонент ‘app-my-card-footer’ всегда выравнивался по вертикали в нижней части области отображения ‘app-my-card’?

Решаемая проблема!

Внутри компонента верхнего уровня используйте несколько отфильтрованных тегов ‘ng-content’, например:

 <div class="my-card-content smart-stack-layout vertical space-between">
    <div style="height: 50px; width: 100%">
      <ng-content select="app-my-card-header"></ng-content>
    </div>
    <div style="height: 100%; width: 100%">
      <ng-content select="app-my-card-body"></ng-content>
    </div>
    <div style="height: auto; width: 100%">
      <ng-content select="app-my-card-footer"></ng-content>
    </div>
  </div>