import { Component ,OnInit, ViewChild} from ‘@angular/core’; import {SelectionModel} from ‘@angular/cdk/collections’; import {MatPaginator} from ‘@angular/material/paginator’; import {MatTableDataSource} from ‘@angular/material/table’; export interface PeriodicElement{ name:string; position:number; weight:number; symbol:string; } const Element_Data:PeriodicElement[]=[ {position: 1, name: ‘Hydrogen’, weight: 1.0079, symbol: ‘H’}, {position: 2, name: ‘Helium’, weight: 4.0026, symbol: ‘He’}, {position: 3, name: ‘Lithium’, weight: 6.941, symbol: ‘Li’}, {position: 4, name: ‘Beryllium’, weight: 9.0122, symbol: ‘Be’}, {position: 5, name: ‘Boron’, weight: 10.811, symbol: ‘B’}, {position: 6, name: ‘Carbon’, weight: 12.0107, symbol: ‘C’}, {position: 7, name: ‘Nitrogen’, weight: 14.0067, symbol: ‘N’}, {position: 8, name: ‘Oxygen’, weight: 15.9994, symbol: ‘O’}, {position: 9, name: ‘Fluorine’, weight: 18.9984, symbol: ‘F’}, {position: 10, name: ‘Neon’, weight: 20.1797, symbol: ‘Ne’},
];
@Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: [’./app.component.css’] })
export class AppComponent implements OnInit { displayedColumns:string[]=[“select”,‘position’,‘name’,‘weight’,‘symbol’] dataSource = new MatTableDataSource(Element_Data);
selection = new SelectionModel(true, []);
selectedName:string[]=[]; selectedSymbol:string[]=[]; @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
ngOnInit() { const initialSelection = []; const allowMultiSelect = true; this.selection = new SelectionModel(allowMultiSelect, initialSelection); this.dataSource.paginator = this.paginator; }
logData(row){
console.log(row); }
updateChkBoxArrary(row,isChecked){ if (isChecked) { this.selectedSymbol.push(row.symbol); this.selection.toggle(row); console.log(this.selectedSymbol); } else {
}
} removeSelectedRows() { this.selection.selected.forEach(item => {
this.selectedName.push(item.name); }); } printSelectedRows(){
this.selection.selected.forEach(item=>{ this.selectedName.push(item.name); }); console.log(this.selectedName) }
/** Whether the number of selected elements matches the total number of rows. */ isAllSelected() { const numSelected = this.selection.selected.length; const numRows = this.dataSource.data.length; return numSelected === numRows; }
/** Selects all rows if they are not all selected; otherwise clear selection. */ masterToggle() { this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row)); }
/** The label for the checkbox on the passed row */ checkboxLabel(row?: PeriodicElement): string { if (!row) { return ${this.isAllSelected() ? 'select' : 'deselect'} all; } return ${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}; } }
