How to manipulate ngfor table, to toggle between two arrays - arrays

Question

I would like to know if there is a simple way of parsing different array to a single *ngfor table. I have the below codes:
.html
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="radio" name="date" (click)="valid()" />
<label class="form-check-label">Valid</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="date" (click)="invalid()"/>
<label class="form-check-label">Invalid</label>
</div>
</div>
<tr *ngFor="let myAccount of Account | filterBy: accountFilter | paginate: { itemsPerPage: count, currentPage: p }; let i = index">
<td>{{ (p - 1) * count + i + 1 }}</td>
<td>{{myAccount.name}}</td>
<td>{{myAccount.startDate}}</td>
<td>{{myAccount.endDate}}</td>
</tr>
.ts
Account = [];
radioAccount = [];
currentDate = '';
ngOnInit() {
showAll();
}
showAll() {
return this.acctService.getAccount().subscribe(data => this.Account = data);
}
valid() {
this.currentDate = this.datePipe.transform(new Date(),"yyyy-MM-dd");
this.radioAccount = this.Account.filter(data => {
return data.startDate < this.currentDate && data.endDate > this.currentDate});
}
invalid() {
this.currentDate = this.datePipe.transform(new Date(),"yyyy-MM-dd");
this.radioAccount = this.Account.filter(data => {
return data.startDate < this.currentDate && data.endDate <= this.currentDate});
}
You can see that I have two arrays, how do I display content of "radioAccount" array when a radio button is clicked? That is, the possibility of swiching between "Account" content and "radioAccount" content. I don't think repeating the *ngfor code with *ngif is a solution.

Answer 1

You can create an array which will not be filtered, e.g., AccountSource and then you can assign original values (AccountSource) to Account:
Account = [];
AccountSource= [];
showAll() {
return this.acctService.getAccount()
.subscribe(data => {
this.Account = data;
this.AccountSource = data;
});
}
valid() {
this.currentDate = this.datePipe.transform(new Date(),"yyyy-MM-dd");
this.Account = this.Account.filter(data => {
return data.startDate < this.currentDate && data.endDate > this.currentDate});
}
invalid() {
this.currentDate = this.datePipe.transform(new Date(),"yyyy-MM-dd");
this.Account = this.Account.filter(data => {
return data.startDate < this.currentDate && data.endDate <= this.currentDate});
}
setSourceData() {
this.Account = this.AccountSource;
}
and call setSourceData() method whenever you want to see original values.