I have an angular 7 Mat-Data-Table that I'm using to show data I'm getting from an API.
I want to use 3 parameters that i get from the client and i save them into values using snapshot.
the problem I'm facing now is how do I make it so that the table will be filtered by the choices of the the client in NgOninit.
This is my Component :
export class ContainersPageComponent implements OnInit {
tableColumn = ['AITOR','SOG_MCOLH','GOBH_MCOLH','AORKH_MCOLH','MCOLH_N7','MCOLH_AAAA', 'TAOR_QTSR_EBRI','QOD_MCHSN','STTOS_RASHI_4_1',
'LQOCH_SHM_MQOTSR_EBRI','LQOCH_SHM_LOEZI_QTSR','LQOCH_QOD_LQOCH'];
p :number = 1;
dataSource : any = new MatTableDataSource;
public show:boolean = false;
public tableHide:any = 'Show';
searchText: string = "";
autoFilter : any;
clientType : string;
storageType: any;
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
filterCheckboxes: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);
constructor(private marinService:MarinServiceService,private route: ActivatedRoute) { }
ngOnInit() {
this.marinService.getAllContainers().subscribe((result) => {
//Data
this.dataSource = new MatTableDataSource(result);
//Paginator
this.dataSource.paginator = this.paginator;
//AutoFilter Form 1st page
this.clientType = this.route.snapshot.queryParamMap.get('clientType');
this.storageType= this.route.snapshot.queryParamMap.get('storageTypes');
console.log('The Client name is : '+this.clientType+' '+'The storage Facility is : '+this.storageType);
//CheckBox Filter
this.dataSource.filterPredicate = (data: Container, filter: any) => {
return filter.split(',').every((item: any) => data.SOG_MCOLH.indexOf(item) !== -1);
};
this.filterCheckboxes.subscribe((newFilterValue: any[]) => {
this.dataSource.filter = newFilterValue.join(',');
});
});
}
toggle(){
this.show = !this.show;
if(this.show) {
this.tableHide = "Hide";
} else {
this.tableHide = "Show";
}
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
public getRowsValue(flag) {
if (flag === null) {
return this.dataSource.length;
} else {
return this.dataSource.filter(i => (i.state == flag)).length;
}
}
addFilter(change: MatCheckboxChange) {
if (this.filterCheckboxes.value.some((a: any) => a === change.source.value)) {
this.filterCheckboxes.next(this.filterCheckboxes.value.filter((a: any) => a !== change.source.value));
} else {
this.filterCheckboxes.next(this.filterCheckboxes.value.concat(change.source.value));
}
}
}
This is my HTML :
<div>
<mat-table [dataSource]="dataSource" [hidden]="!show" matSort >
<!-- Location -->
<ng-container matColumnDef="AITOR">
<mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.AITOR}} </mat-cell>
</ng-container>
<!-- Type -->
<ng-container matColumnDef="SOG_MCOLH">
<mat-header-cell *matHeaderCellDef mat-sort-header > Container Type </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.SOG_MCOLH}} </mat-cell>
</ng-container>
<!-- Height -->
<ng-container matColumnDef="GOBH_MCOLH">
<mat-header-cell *matHeaderCellDef> Container Height </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.GOBH_MCOLH}} </mat-cell>
</ng-container>
<!-- Length -->
<ng-container matColumnDef="AORKH_MCOLH">
<mat-header-cell *matHeaderCellDef> Container Lenght </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.AORKH_MCOLH}} </mat-cell>
</ng-container>
<!-- Number -->
<ng-container matColumnDef="MCOLH_N7">
<mat-header-cell *matHeaderCellDef> Container Number </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.MCOLH_N7}} </mat-cell>
</ng-container>
<!-- Name AAAA -->
<ng-container matColumnDef="MCOLH_AAAA">
<mat-header-cell *matHeaderCellDef > Container Name </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.MCOLH_AAAA}} </mat-cell>
</ng-container>
<!-- QTSR Hebrow -->
<ng-container matColumnDef="TAOR_QTSR_EBRI">
<mat-header-cell *matHeaderCellDef> Storage Site </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.TAOR_QTSR_EBRI}} </mat-cell>
</ng-container>
<!-- Storage Code -->
<ng-container matColumnDef="QOD_MCHSN">
<mat-header-cell *matHeaderCellDef> Storage Code </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.QOD_MCHSN}} </mat-cell>
</ng-container>
<!-- Status -->
<ng-container matColumnDef="STTOS_RASHI_4_1">
<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.STTOS_RASHI_4_1}} </mat-cell>
</ng-container>
<!-- MQOTSR Hebrow -->
<ng-container matColumnDef="LQOCH_SHM_MQOTSR_EBRI">
<mat-header-cell *matHeaderCellDef> Customer MQOTSR </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.LQOCH_SHM_MQOTSR_EBRI}} </mat-cell>
</ng-container>
<!-- MQOTSR Hebrow -->
<ng-container matColumnDef="LQOCH_SHM_LOEZI_QTSR">
<mat-header-cell *matHeaderCellDef> ESN </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.LQOCH_SHM_LOEZI_QTSR}} </mat-cell>
</ng-container>
<!-- MQOTSR Hebrow -->
<ng-container matColumnDef="LQOCH_QOD_LQOCH">
<mat-header-cell *matHeaderCellDef> Code Customer </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.LQOCH_QOD_LQOCH}} </mat-cell>
</ng-container>
<!--Row Maker-->
<mat-header-row *matHeaderRowDef="tableColumn"></mat-header-row>
<mat-row *matRowDef="let row; columns: tableColumn;" ></mat-row>
</mat-table>
</div>
I have tried using pipes but I don't really understand them.
