Стили Angular + Bootstrap ломаются с подкомпонентами

Question

Я пытаюсь использовать группу кнопок начальной загрузки, которая в сыром HTML выглядит следующим образом:

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Эта иерархия должна строго соблюдаться (т.е. размещение элементов между <labels> нарушит CSS).

В моем коде Angular кнопки довольно сложны и управляются через *ngFor, поэтому я решил извлечь структуру компонента кнопки (то есть: <label><input></label>) как его собственный компонент. Так что мой шаблон группы кнопок выглядит так:

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <ng-container *ngFor="let actionType of actionTypes">
    <ek-action-button [actionType]="actionType"></ek-action-button>
  </ng-container>
</div>

Однако это нарушает CSS, потому что родительские / дочерние отношения изменяются при визуализации. Я читал в других вопросах, что в подобных случаях следует использовать селектор атрибута (т.е.: [ek-action-button]), но это все равно помещает дополнительный элемент между ними и прерывает CSS.

Есть ли какие-либо решения для этого? Как мне удалить хост? Я не могу использовать селектор атрибута в ng-контейнере.