I have the following button group:
<div class="btn-group">
<app-remove-button></app-remove-button>
<button type="button" class="btn btn-outline-secondary">b2
</button>
</div>
app-remove-button is a component with the template:
<button class="btn btn-outline-danger" type="button" ngbTooltip="hint">
<b>×</b></button>
this is not rendered correctly:
the html output is:
how can I make it look like:
Change the selector of your component :
app-remove-button → [app-remove-button]
You can now use it an an attribute (getting rid of the selector added in the final HTML that messes up your style) :
<div class="btn-group">
<button app-remove-button></button>
<button type="button" class="btn btn-outline-secondary">b2
</button>
</div>
Extend your bootstrap CSS with following code:
.btn-group > [in-group]:not(:first-child) > .btn {
margin-left: -1px;
}
.btn-group > [in-group]:not(:last-child):not(.dropdown-toggle) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > [in-group]:not(:first-child) > .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
And then in your component buttons add in-group attribute.
<div class="btn-group">
<app-remove-button in-group></app-remove-button>
</div>
