/Javascript/AngularJS/How to add row in angular dynamically

How to add row in angular dynamically

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Price</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let field of fieldArray; let i = index">
            <td>
                <input [(ngModel)]="field.code" class="form-control" type="text" name="{{field.code}}" />
            </td>
            <td>
                <input [(ngModel)]="field.name" class="form-control" type="text" name="{{field.name}}" />
            </td>
            <td>
                <input [(ngModel)]="field.price" class="form-control" type="text" name="{{field.price}}" />
            </td>
            <td>
                <button class="btn btn-default"  type="button" (click)="deleteFieldValue(i)">Delete</button>
            </td>
        </tr>
        <tr>
            <td>
                <input class="form-control" type="text" id="newAttributeCode" [(ngModel)]="newAttribute.code" name="newAttributeCode" />
            </td>
            <td>
                <input class="form-control" type="text" id="newAttributeName" [(ngModel)]="newAttribute.name" name="newAttributeName" />
            </td>
            <td>
                <input class="form-control" type="text" id="newAttributePrice" [(ngModel)]="newAttribute.price" name="newAttributePrice" />
            </td>
            <td>
                <button class="btn btn-default" type="button" (click)="addFieldValue()">Add</button>
            </td>
        </tr>
    </tbody>
</table>

Source: stackoverflow.com

Similar codes

0 vote120 views1 answer
Angular erro ao adicionar um projeto no firebase Failed to make request to https://www.gstatic.com/firebasejs/releases.json
Javascript AngularJS
0 vote129 views1 answer
Can we get the value of form control after disabling it angular
Javascript AngularJS
0 vote126 views1 answer
Angular on back skip routes
Javascript AngularJS
1 vote114 views1 answer
What it means --skiptests==true in angular
Javascript AngularJS
1 vote151 views4 answers
Angular 8 features
Javascript AngularJS
0 vote110 views1 answer
No styles are appearing in angular calendar
Javascript AngularJS
0 vote158 views1 answer
Switch element array angular
Javascript AngularJS
0 vote107 views1 answer
How to update angular core in ionic
Javascript AngularJS
0 vote119 views1 answer
Angular 11 how to use skipLocationChange
Javascript AngularJS
0 vote115 views1 answer
Angular call function on option select
Javascript AngularJS