Unable to determine why the space appears in buttons in angular2 html - html

Question

Initially my page appears like this, with one input text box and a "+" button and a "-" button.
Image -
Now, if i click on the "+" button , the size between the first text-box and button increases. Please have a look -
Image -
Please guide on why such a gap appears. This gap doesn't appear when i click on subsequent "+" buttons.
code -
app.component.html
<div *ngIf="addContainer">
<p style="margin-left: 200px; font-size:18px">Please enter the node -</p>
<table align="center">
<tbody>
<tr>
<td>
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" class="btn btn-danger"> - </button>
</td>
</tr>
<tr *ngFor="let container of containers" >
<div #myElement>
<td >
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="myElement.remove()" class="btn btn-danger"> - </button>
</td>
</div>
</tr>
<tr>
<td style="text-align:center">
<button type="button" (click)="showGraphs()" class="btn btn-dark">Search</button>
</td>
</tr>
</tbody>
</table>
</div>

Answer 1

Its because of extra div inside the tr. replace the div by ng-container.
<tr *ngFor="let container of containers" >
<ng-container #myElement>
<td >
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="myElement.remove()" class="btn btn-danger"> - </button>
</td>
</ng-container>
</tr>
OR
you can put the reference myElement at tr level
<tr *ngFor="let container of containers" #myElement >
<ng-container >
<td >
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="myElement.remove()" class="btn btn-danger"> - </button>
</td>
</tr>

Answer 2

I did this -
app.component.ts
deleteOneMore(){
this.containers.splice(this.index, 1);
}
app.component.html
<tr *ngFor="let container of containers; let i = index;" >
<ng-container >
<td >
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td >
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="deleteOneMore()" class="btn btn-danger"> - </button>
</td>
</ng-container>
</tr>

Answer 3

So here is my answer i think it will help you with your problem, you have used a class in every button called "btn" and it contain by default padding of padding: .375rem .75rem; so you guess my answer, you have to remove it and you will be fine.
when padding were not removed from btn class
when padding removed from btn classjust checked after commenting this btn padding in picture