Amigos estoy haciendo un reporte con checkbox
, obtengo los checkbox
marcados, pero deseo marcar todos con un checkbox
general en mi caso de ejemplo frutas
Aquí la imagen del formulario
mi component.ts
import { Component, VERSION , OnInit} from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
selectedItems:string[];
ngOnInit(){
this.selectedItems = new Array<string>();
}
getAlbumId(e:any, id:string)
{
if(e.target.checked)
{
console.log(id + 'cheched');
this.selectedItems.push(id);
}
else{
console.log(id + 'Uncheched');
this.selectedItems = this.selectedItems.filter(m=>m!=id);
}
console.log(this.selectedItems);
}
}
Aquí el component.html
<hello name="{{ name }}"></hello>
<p>
seleccione Frutas
</p>
<table>
<tr>
<td> <input type="checkbox" > </td>
<td> <strong>Frutas</strong></td>
</tr>
<tr>
<td> <input type="checkbox" name="1" value="false" (change)="getAlbumId($event,'1')"> </td>
<td>Manzana</td>
</tr>
<tr>
<td> <input type="checkbox" name="2" value="false" (change)="getAlbumId($event,'2')"> </td>
<td>Pera</td>
</tr>
<tr>
<td> <input type="checkbox" name="3" value="false" (change)="getAlbumId($event,'3')"> </td>
<td>Naranja</td>
</tr>
</table>