Angular2 - Delete a row or column. When you click the delete button

Question

We can easily remove something like this with 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 a row or cell element here, where the event came from?

Answer 1

From your question, you want to delete the line when you click the delete button. In Angular, you must remove the entry from the model. Therefore, for this, simply pass the line identifier for something 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 the controller

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

Answer 2

, Angular, , , . DOM.

:

• Angular Zone.js () (, ), Angular. , , , .
• Angular , node - ( , ChangeDetectorRef). .
• , / . , - Zone.js Angular . ( ) . - , (, ), DOM.
• , , DOM , .