CODEWITHSUNDEEP
angularbootstrap-4
Galdor
Galdor

Reputation: 1955

how to put an angular button component into a bootstrap button group

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>&times;</b></button>

this is not rendered correctly:

enter image description here

the html output is:

enter image description here

how can I make it look like:

enter image description here

Upvotes: 2

Views: 280

Answers (2)

michal.jakubeczy
michal.jakubeczy

Reputation: 9469

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>

Upvotes: 0

user4676340
user4676340

Reputation:

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>

Upvotes: 1

Related Questions