2

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

3
  • do you have a fiddle to show the code running Commented Jun 8, 2018 at 9:15
  • probably want to remove the right border radius Commented Jun 8, 2018 at 9:16
  • Did you get this working? Commented Apr 16, 2020 at 21:40

2 Answers 2

1

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>
Sign up to request clarification or add additional context in comments.

1 Comment

I tried this. It turned out to be very complex. Setting the classes is not easy and I have no idea how to add the tooltip. Is there an easy way to set classes and other properties/attributes?
0

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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.