I have a model which is an array element. I want to clear the values of each element on ngIf condition.Please find below HTML :
<div *ngIf="flag" >
<table id="table" class="table table-hover table-bordered table-mc-light-blue">
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
</thead>
<tr *ngFor="let item of collection;">
<td>{{item.col1}}</td>
<td>
<input type="text" class="form-control" [(ngModel)]="item.col2" #input="ngModel" name="input-{{i}}">
</td>
</tr>
</table>
</div>
On flag set to false, I want to clear all values of the collection. There is an option of initializing collection, but I don't want to do that as I have several such collections.
Any help would be appreciable!!
<input type="radio" (change)="resetForm()"/>
resetForm(){
if(!this.flag){
this.collection = new Array()
}
}
What is the "event" or method call that causes the flag to be set to false?
This is the method call where you'll also want to clear the collection.
Something like this:
public toggleFlag() {
this.expandFlag = !this.expandFlag;
this.collection = [];
}
In your component:
ngDoCheck() {
if (!this.flag) {
this.collection = [];
}
}
And you have to implement DoCheck like this:
export class myClass implements OnInit, DoCheck {
Basically, this is a listener that trigger at every change that happens, and here we check that this.flag is false and we empty the collection array element.