I have a question regarding a bootstrap button group. The buttons within it are Angular components structured like this:
<div class="btn-group float-right" role="group" aria-label="Basic example">
<app-action
[actionType]="'invoices'"
[action]="'send'"
[buttonIcon]="'fa-envelope'"
(onLoadingActions)="setLoading($event)"
[loading]="loading"
[selectedValues]="selectedActionValues">
</app-action>
<app-action
[actionType]="'invoices'"
[action]="'delete'"
[buttonIcon]="'fa-trash-alt'"
(onLoadingActions)="setLoading($event)"
[loading]="loading"
[selectedValues]="selectedActionValues">
</app-action>
</div>
The structure of the action component is as follows:
<button
type="button"
class="btn btn-primary"
[disabled]="loading">
<i class="fas {{buttonIcon}}" (click)="onClickAction()"></i>
</button>
Due to the selector used, the styling of the bootstrap button group deviates from the expected behavior because of the additional container around the buttons.
Is there a solution to resolve this issue?