show a small inline delete button upon button press in ng-bootstrap - html

Question

My Current implementation of what I want is done using ng-bootstrap for Angular4.
Image
As you can see I used the Check box button to display a response from the backend. If you click on the button the x button will be not be shown and it will also hide some other html elements below.
Upon clicked (checked)
I am actually looking to improve the layout, where I wish that the x button would somehow be spanned together for a smooth feeling.
I do not know of any components from Bootstrap4.x or ng-bootstrap itself that could do something.
Any design suggestions or improvements is what I am looking for.
code
<!-- Search Keywords go here -->
<div class="container" *ngIf="Output.length">
<div class="row">
<div class="col-sm-2">
<label class="col-form-label-lg"><b> Search History </b></label>
</div>
<div class="col-sm-10">
<div class="btn-group btn-group-toggle" *ngFor="let keyword of Output; let cbIndex = index">
<label class="btn-primary" ngbButtonLabel>
<input type="checkbox"
ngbButton
#kwCheck
(change)="cbInput= kwCheck.checked; hideKW(cbIndex)"
> {{keyword.kw}}
</label>
<span><button class="btn btn-xs btn-danger"
(click)="deleteKW(keyword.kw); $event.stopPropagation()"
[disabled]=kwCheck.checked
[hidden]="kwCheck.checked">×</button>
</span>
</div>
</div>
</div>
</div>
Output.length is an array of JSON responses from the backend.

Answer 1

There are, at least, two ways that you can do so.
Use btn-group. It is pretty well semantic also, except that you use btn class for the input container which is a not button.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="Basic example">
<label class="btn d-flex align-items-center bg-primary px-3 mb-0">
<input type="checkbox" class="" id="customCheck1">
<span class="px-1 mb-0" for="customCheck1">Check</span>
</label>
<button type="button" class="btn btn-danger">×</button>
</div>
Use input-group. I prefer this approach because all of the classes have meaning.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="input-group w-auto">
<label class="d-flex align-items-center w-auto bg-primary px-3 mb-0">
<input type="checkbox" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
<span class="pl-2">Check</span>
</label>
<div class="input-group-prepend">
<button class="btn btn-danger" type="button">×</button>
</div>
</div>
Update
In order to hide the checkbox's tick mark, use btn-group-toggle. It is the same method that bootstrap does.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="input-group w-auto ">
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary" style="border-radius: 0;">
<input type="checkbox" autocomplete="off"> Check
</label>
</div>
<div class="input-group-prepend">
<button class="btn-danger btn" id="basic-addon1">×</button>
</div>
</div>
As far as i know, there is no way to reset the border to zero. So, you have to use custom CSS.*
https://codepen.io/anon/pen/qKOdJv?editors=1000