I am trying to create a collection of text input components with values stored in an array. However, when using the following code, the values seem to be placed incorrectly in the array and I cannot identify the bug.
<table>
<tr *ngFor="let option of this.options; let i = index">
<td style="width:100%">
<textinput2 (textchange)="this.options[i] = $event;" class="lessmargin" type="text" [value]="this.options[i]">
</textinput2>
</td>
<td valign="top">
<button [attr.disabled]="this.options.length >= 3 ? null : ''" (click)="this.options.splice(i, 1)" style="top:0;" class="btn btn-outline-danger">-</button>
</td>
</tr>
</table>
<a (click)="this.options.push('')" class="showmore">+ Add another option</a>
Textinput2 Component:
<div class="form-group">
<label *ngIf="this.placeholder && this.labelsize == 'big'" for={{randomid}}><h5>{{this.placeholder}}</h5></label>
<label *ngIf="this.placeholder && this.labelsize == 'small'" for={{randomid}}>{{this.placeholder}}</label>
<input [(ngModel)]="this.value" (change)="this.textchange.emit(this.value)" type={{type}} id={{randomid}} class="form-control" placeholder={{this.placeholder}}>
</div>
Thank you.