The button group is divided into 2 components

Question

Bootstrap has the following example group of actions. The result is that the buttons within the group are combined together.

Inside my Angular project, I already have a toolbar and you want to apply these styles to them. I mainly have ToolbarComponent and ActionComponent .

The idea works fine as long as I put everything in 1 component without an ActionComponent sublayer. But when I separate them (as shown in the figure above), then everything no longer works.

Buttons are not combined (look at the corners of the buttons).

When I open the runtime html code in google chrome, it shows the following:

As you can see, there is a level between <div class="btn-group"> and <div class="btn"> . (i.e. the tag of the ActionComponent itself: <objt-action> ). My best guess is that this tag messes things up.

My best guess is that this extra tag breaks the boot logic.

So now I’m interested in learning about the best strategy. to solve my problem.

VIEWING ToolbarComponent

 <div class="d-flex flex-wrap justify-content-start" role="toolbar" aria-label="toolbar"> <!-- iterate action-groups --> <div *ngFor="let actionGroup of actionGroups" class="btn-group p-1" role="group"> <!-- for each action-group, iterate thru the actions of the group --> <ng-template ngFor let-action [ngForOf]="actionGroup.actions"> <objt-action [action]="action" (actionClicked)="actionClicked($event)"></objt-action> </ng-template> </div> </div> 

EDIT

At the same time, I also tried this by changing the component directive, from objt-action to [objt-action] . By doing so, I can define an ActionComponent as follows inside the ToolbarComponent :

  <div objt-action> </div> 

But the resulting xml is still invalid, there is still an alarming intermediate layer, i.e. <div objt-action> .

Answer 1

Using the approach mentioned in How to remove / replace the angular2 selector tag from HTML , you need to make this element <div class="action-group" aria-label="Basic example"> component.

What you tried is to have a component that doesn't add a tag at all, which is impossible. You can use a structured directive and use it as

 <div class="action-group" aria-label="Basic example"> <ng-container *myDirective></ng-container> </div> 

and then *myDirective generate the buttons.

See also https://angular.io/guide/structural-directives