Angular2 - Delete Row Or Column Where the delete button was clicked

Question

We can easily delete something like that using jquery, but can we use angular to do something like this?

<tr>
<td *ngFor="#lev of rubric?.criteria[0].levels">
                    <button class="close removeLevel" (click)="onClickRemove($event)">&times;</button>
                    <input type="text" class="form-control" placeholder="Performance Level"
                           #level="ngForm"
                           [(ngModel)]="lev.level"
                           ngControl="level"
                    />
</td>
</tr>

And in Component.ts:

onClickRemove($event) {
}

How can I access the row or cell element here, from where the event was raised?

Answer 1

From you question , you want to delete the row when the delete button is pressed . In Angular way what you must be doing is to remove the record from the model . So for that just pass the row id for something that unique to the ng-controller and remove it from the model.

So if you have something like below

 <td *ngFor="#lev of rubric?.criteria[0].levels">
                    <button class="close removeLevel" ng-click="onClickRemove($index)">&times;</button>
                    <input type="text" class="form-control" placeholder="Performance Level"
                           #level="ngForm"
                           [(ngModel)]="lev.level"
                           ngControl="level"
                    />
</td>

in controller

$scope.onClickRemove=function(index)
{
   //Replace your model here 
   rows.splice(index, 1);
}