I want to download csv file on checking or uncheking checkboxes, but when i click on checkbox function trigger but when i unchecked checkbox function doesn't trigger
following is my .ts file
import { Component } from '@angular/core';
import { DownloadCSVService } from '../app/download-csv.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'downloadCSV';
constructor(private downloadCSV: DownloadCSVService) { }
itemChecked: boolean = false;
allCheckedBox: boolean = false;
selectedData: any = [];
finalArrayData:any =[];
jsonData = [
{
id: 1,
name: "Anil Singh",
age: 33,
average: 98,
approved: true,
description: "I am active blogger and Author."
},
{
id: 2,
name: 'Reena Singh',
age: 28,
average: 99,
approved: true,
description: "I am active HR."
},
{
id: 3,
name: 'Aradhya',
age: 4,
average: 99,
approved: true,
description: "I am engle."
},
];
download() {
console.log("json data" + this.jsonData);
if (this.itemChecked = true && this.selectedData.length < 0) {
this.downloadCSV.downloadFile(this.jsonData, 'jsontocsv');
}
if (this.selectedData.length > 0) {
for (var i = 0; i < this.selectedData.length; i++) {
var arrayFind = this.jsonData.find(employee => employee.id === this.selectedData[i]);
this.finalArrayData.push(arrayFind);
}
console.log(this.finalArrayData);
this.downloadCSV.downloadFile(this.finalArrayData, 'jsontocsv');
}
}
setCheckBoxTrue($event) {
if ($event.target.checked == true) {
this.itemChecked = true;
} else {
this.itemChecked = false;
}
}
selectedValue($event, data: any) {
if($event.target.checked !== false){
this.selectedData.push(data.id);
console.log(this.selectedData);
}
}
}
// following is my html code
<router-outlet></router-outlet>
<button type="button" color="primary" (click)='download()' style="float: right"> Download CSV </button>
<br>
<table border="2" cellpadding="2">
<thead>
<th><input type="checkbox" (click)="setCheckBoxTrue($event)" [checked]="allCheckedBox"></th>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Average</th>
<th>Status</th>
<th>Description</th>
</thead>
<tbody>
<tr *ngFor="let data of jsonData">
<td><input type="checkbox" (click)="selectedValue($event,data)" [checked]="itemChecked"></td>
<td>{{ data.id }}</td>
<td>{{ data.name }}</td>
<td>{{ data.age }}</td>
<td>{{ data.average }}</td>
<td>{{ data.approved }}</td>
<td>{{ data.description }}</td>
</tr>
</tbody>
</table>
What I have tried:
i tried several thing but still it doesn't work