Develop Reference

angular MatTableDataSource filterPredicate does not update the table after filter updates

import { Component, OnInit, AfterViewInit } from '#angular/core';
import { Coach } from "../../shared/models/User";
import { ManagementService } from "../../shared/services/management.service";
import { Router } from '#angular/router';
import { UtilsService } from 'src/app/shared/services/utils.service';
import * as moment from 'moment';
import swal from 'sweetalert2';
import { FormControl } from '#angular/forms';
import { MatTableDataSource } from '#angular/material/table';
#Component({
selector: 'app-coaches',
templateUrl: './coaches.component.html',
styleUrls: ['./coaches.component.css']
})
export class CoachesComponent implements OnInit, AfterViewInit {
dataSource;
columnsToDisplay = ['username', 'email', 'actions'];
coachList: Array<Coach> = [];
username
usernameFilter = new FormControl('');
constructor(
private managementService: ManagementService,
private router: Router,
private utils: UtilsService
) {
this.dataSource = new MatTableDataSource();
this.dataSource.filterPredicate = this.createFilter();
}
async ngAfterViewInit() {
// await this.initializePage();
}
ngOnInit() {
this.initializePage();
this.usernameFilter.valueChanges
.subscribe(
username => {
this.username = username;
this.dataSource.filter = this.username;
console.log(this.dataSource.filter)
}
)
}
createFilter(): (data: Coach, filter: string) => boolean {
let filterFunction = function (data, filter): boolean {
return data.username.toLowerCase().indexOf(filter.toLowerCase()) !== -1
}
return filterFunction;
}
async initializePage() {
let coaches: Array<Coach> = await this.managementService.getCoaches();
this.coachList = coaches.sort(
(prev, next) => {
return moment(prev.createdAt).isBefore(moment(next.createdAt)) ? 1 : -1;
}
);
this.dataSource = this.coachList
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="main-content zero_margin">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header card-header-primary card-header-icon">
<div class="card-icon">
<i class="material-icons">account_circle</i>
</div>
<h4 class="card-title">Coaches</h4>
</div>
<div class="card-body">
<div class="toolbar">
<button mat-raised-button class="btn btn-primary" (click)="registerCoach()">Register</button>
<div class="col-lg-3 col-md-6 col-sm-4 add-select" style="float: right;">
<mat-form-field appearance="standard">
<mat-label>Filter</mat-label>
<input matInput [formControl]="usernameFilter" placeholder="username" #input>
</mat-form-field>
</div>
</div>
<div style="text-align: center" *ngIf="coachList.length === 0">
<br>
<div style="font-style: italic; color: gray">.:: No Registered Coaches ::.</div>
</div>
<table mat-table [dataSource]="dataSource" class="table table-striped table-no-bordered table-hover"
cellspacing="0" width="100%" style="width:100%">
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> Username </th>
<td mat-cell *matCellDef="let row"> {{row.username}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> Email </th>
<td mat-cell *matCellDef="let row"> {{row.email}} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let row">
<app-button-delete (onClick)="deleteCoach(coach.id)"></app-button-delete>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>
<mat-paginator showFirstLastButtons [pageSizeOptions]="[10, 25, 50, 100]"></mat-paginator>
</div>
</div>
</div>
</div>
</div>
</div>
I am very new to Angular and I am working on a project previously owned by other people.
The question goes as the title, I have done a lot of search around but none of the answers from stackoverflow works for me so far.
Below are the code, let me know if you need other information.
in a word, for some reason the filter function does not update the table content, which is confusing because it seems that the filter function works from another component, with essentially the same code.
This really confused me. Thank you in advance for any help and suggestion!!!

You need to assign coachList as data of the dataSource.
// replace this line
this.dataSource = this.coachList
// with this
this.dataSource.data = this.coachList
when you create the dataSourse as an instance of MatTableDataSource the data array that is displayed is stored in the data property of the data source object, you can read more about MatTableDataSource here

How to access data souce Angular Material Table

I hope everyone is doing great. Im trying to render data to the table for a material table but I cant solve why it isnt working. When I want to assign the data to the datasource for the table to render it dosnt get the information. Would apprecaite if someone could look for a secound and see if something.
Typescript and HTML:
import { Component, OnInit, ViewChild } from '#angular/core';
import { Nobina2NewsesService, StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse } from '../../services/mssql/stop/api/v1';
import { MatPaginator } from '#angular/material/paginator';
import { MatSort } from '#angular/material/sort';
import { MatTableDataSource } from '#angular/material/table';
#Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
news_list: any;
user_list: any;
data: any;
displayedColumns: string[] = ['id', 'title', 'date', 'text'];
dataSource: MatTableDataSource<StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse>;
#ViewChild(MatPaginator)
paginator!: MatPaginator;
#ViewChild(MatSort)
sort!: MatSort;
newsListService = this.newsService.v1Nobina2NewsesGet().subscribe(
(res) => {
this.news_list = res;
},
(err) => { console.log(err); alert("Kolla nätverksanslutnignen(CORS)"); },
() => console.log('done a lot with news!')
);
constructor(private newsService: Nobina2NewsesService) {
// Assign the data to the data source for the table to render
this.dataSource = new MatTableDataSource(this.news_list);
}
ngOnInit(): void {
throw new Error('Method not implemented.');
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}
<mat-form-field appearance="standard">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Filter" #input>
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- ID Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let news"> {{ news.id }} </td>
</ng-container>
<!-- Progress Column -->
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Titel </th>
<td mat-cell *matCellDef="let news"> {{news.title}}% </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Datum </th>
<td mat-cell *matCellDef="let news"> {{ news.date.split('T')[0] }} </td>
</ng-container>
<!-- Fruit Column -->
<ng-container matColumnDef="text">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Text </th>
<td mat-cell *matCellDef="let news"> {{news.text}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let news; columns: displayedColumns;"></tr>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
</tr>
</table>
<mat-paginator [pageSizeOptions]="[10, 25, 100]" aria-label="Select page of news"></mat-paginator>
</div>

It may be that when you assign the value to the dataSource the variable new_list has no value, try this way:
constructor(private newsService: Nobina2NewsesService) {
this.getData();
}
getData(): void {
this.newsService.v1Nobina2NewsesGet().subscribe(res => {
this.new_list = res;
this.setDataSource();
}, err => {
console.log(err); alert("Kolla nätverksanslutnignen(CORS)");
});
}
setDataSource(): void {
this.dataSource = new MatTableDataSource(this.news_list);
}

Mat-Table from angular materials not displaying data from firebase

I'm using Angular, NgRedux and firebase (real time database). I'm trying to display my fetched data into a mat-table from Angular/material. I can see the data in the console, but not in the table. I can only display my local data in the table as you can see in my events.component.html temple down bellow.
I'm quite new with Angular. Any help will be highly appreciated.
here is my events.component.ts file
import { NgRedux } from '#angular-redux/store';
import { Component, OnInit } from '#angular/core';
import { MatTableDataSource } from '#angular/material/table';
import { Router } from '#angular/router';
import { Event } from '../entities/Event';
import { EventeActions } from '../store/actions/EventAcitons';
import { AppState } from '../store/Store';
#Component({
selector: 'app-events',
templateUrl: './events.component.html',
styleUrls: ['./events.component.scss']
})
export class EventsComponent implements OnInit{
public events: Event[];
private availableEvents: Event[] = [
{
event: 'Picnic',
date: '12/02/2021',
location: 'Rådhusstrædet',
status: 'published'
},
{
event: 'Surfing',
date: '11/04/2021',
location: 'København V',
status : 'draft'
},
];
displayedColums = ['event', 'date', 'location', 'status'];
dataSource = new MatTableDataSource<Event>();
getAvailableEvents() {
return this.availableEvents.slice();
}
constructor(
private router: Router,
private ngRedux: NgRedux<AppState>,
private eventActions: EventeActions
) { }
ngOnInit(): void {
this.eventActions.readEvent();
// this.dataSource.data = this.getAvailableEvents();
this.ngRedux.select(state => state.events).subscribe(res => {
this.events = res.events;
})
}
editPost(id: any) {
this.router.navigate(['neweditevent', {myId: id}])
}
}
and here is my events.component.html file
<h1 class="title">Planned Events</h1>
<div class="flexHeader">
<button mat-raised-button color="primary" routerLink="/neweditevent" id="newEditBtn">New Event</button>
</div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="event">
<th mat-header-cell *matHeaderCellDef> Event </th>
<td mat-cell *matCellDef="let element"> {{element.event}} </td>
</ng-container>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef> Date </th>
<td mat-cell *matCellDef="let element"> {{element.date | date}} </td>
</ng-container>
<ng-container matColumnDef="location">
<th mat-header-cell *matHeaderCellDef> Location </th>
<td mat-cell *matCellDef="let element"> {{element.location}} </td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef> Status </th>
<td mat-cell *matCellDef="let element"> {{element.status}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColums"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColums;"></tr>
</table>
Thank you in advance...

Try something like this
ngOnInit(): void {
this.eventActions.readEvent();
// this.dataSource.data = this.getAvailableEvents();
this.ngRedux.select(state => state.events).subscribe(res => {
this.events = res.events;
this.dataSource.data = this.events;
})
}

Why I can't get result from parent component in Angular

I want child components in angular to separate Material Table(child) from other elements(parent), but the weird thing is that it seems I cannot get data from the parent or I get initialized data from parents and cannot refresh.
Here is the Code:
firstly, the parent .ts file:
#Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit{
ticketList: Ticket[] = [];
originalTicketList: Ticket[] = [];
filterAllForm: FormGroup;
labelList: string[];
homeLabelList: string[];
currentTicketId: string;
searchBy: string = '';
maxall : number = 100;
isLoading :boolean = true;
showRelatedTickets = true;
constructor(private ticket: TicketService,
private formBuilder: FormBuilder) { }
ngOnInit() {
this.filterAllForm = this.formBuilder.group({
startDate: [''],
endDate: ['']
});
this.getAllTicket();
}
get filterFormControls() { return this.filterAllForm.controls; }
getAllTicket() {
let queryParams = '';
console.log(this.currentTicketId) + " " + this.searchBy;
if (this.searchBy === 'id') {
queryParams = 'id=' + this.currentTicketId;
this.showRelatedTickets = true;
}else if(this.searchBy !== ''){
queryParams = this.searchBy + '=' + this.currentTicketId;
this.showRelatedTickets = false;
}
this.ticket.getAllTicket(queryParams).then((res: Ticket[]) => {
this.isLoading = false;
this.ticketList = res;
this.originalTicketList = this.ticketList;
});
}
searchTicket() {
this.isLoading = true;
this.getAllTicket();
}
}
the parent html like this:
<div class="ticket-container">
<mat-card *ngIf="isLoading" class="mat-card-style">
<mat-progress-spinner color="primary" mode="indeterminate">
</mat-progress-spinner>
</mat-card>
<div *ngIf="showRelatedTickets">
<app-dashboard-related-tickets-table [tablesource]="ticketList">
</app-dashboard-related-tickets-table>
</div>
<div *ngIf="!showRelatedTickets">
<app-dashboard-non-related-tickets-table [tablesource]="ticketList">
</app-dashboard-non-related-tickets-table>
</div>
</div>
and there are two children you can see, one is app-dashboard-related-tickets-table and another one is app-dashboard-non-related-tickets-table, they have a different format and changed by the button
showRelatedTickets. Here I will show the first one
the child(app-dashboard-related-tickets-table) .ts file:
#Component({
selector: 'app-dashboard-related-tickets-table',
templateUrl: './dashboard-related-tickets-table.component.html',
styleUrls: ['./dashboard-related-tickets-table.component.scss']
})
export class DashboardRelatedTicketsTableComponent implements OnInit, AfterViewInit{
dataSource: any;
displayedDetailColumns = ['id', 'caseStatus', 'anchorPoint', 'findingSourceSystem','caseCreateTimestamp', 'resolvedBy', 'resolution', 'resolutionNote'];
maxall: number = 100;
#Input() tablesource: Ticket[];
#ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
#ViewChild(MatSort, { static: true }) sort: MatSort;
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
constructor() { }
ngOnInit() {
console.log(this.tablesource);
this.dataSource = new MatTableDataSource(this.tablesource);
}
ngAfterViewInit(){
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.getPageSizeOptions();
}
getPageSizeOptions(): number[] {
if (this.dataSource.data.length>this.maxall){
return [20, 50, this.dataSource.data.length];
}else{
return [20, 50, this.maxall];
}
}
}
then the child(app-dashboard-related-tickets-table) .html file:
<table mat-table matTableExporter [dataSource]="dataSource" matSort class="mat-elevation-z8"
#exporter="matTableExporter">
<!-- Ticket Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-column-id-source"> SIR ID </th>
<td mat-cell *matCellDef="let element" class="mat-column-id-source">
<a href='ticket/{{element.id}}'>{{element.id}}</a>
</td>
</ng-container>
<!-- Type Column event source -->
<ng-container matColumnDef="findingSourceSystem">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-column-id-source"> Source </th>
<td mat-cell *matCellDef="let element" class="mat-column-id-source"> {{element.findingSourceSystem}} </td>
</ng-container>
<!-- Type Column Related Event count -->
<ng-container matColumnDef="anchorPoint">
<th mat-header-cell *matHeaderCellDef class="mat-column-related-ticket-num"> Related Cases </th>
<td mat-cell *matCellDef="let element" class="mat-column-related-ticket-num">
{{element.relatedVertices}} </td>
</ng-container>
<!-- Type Column event source -->
<ng-container matColumnDef="caseStatus">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-column-case"> Case Status </th>
<td mat-cell *matCellDef="let element" class="mat-column-case"> {{element.caseStatus}} </td>
</ng-container>
<!-- Type Column event source -->
<ng-container matColumnDef="caseCreateTimestamp">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-column-date"> Case Created </th>
<td mat-cell *matCellDef="let element" class="mat-column-date">
{{element.caseCreateTimestamp | date:'MMM d, y, h:mm:ss a'}}
</td>
</ng-container>
<ng-container matColumnDef="resolvedBy">
<th mat-header-cell *matHeaderCellDef class="mat-column-resolvedBy"> Resolved By </th>
<td mat-cell *matCellDef="let element" class="mat-column-resolvedBy"> {{element.resolvedBy}}
</td>
</ng-container>
<ng-container matColumnDef="resolution">
<th mat-header-cell *matHeaderCellDef class="mat-column-closeCode"> Close Code </th>
<td mat-cell *matCellDef="let element" class="mat-column-closeCode"> {{element.resolution}}
</td>
</ng-container>
<ng-container matColumnDef="resolutionNote">
<th mat-header-cell *matHeaderCellDef class="mat-column-closeNote"> Close Note </th>
<td mat-cell *matCellDef="let element" class="mat-column-closeNote"> {{element.resolutionNote}}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="getPageSizeOptions()" showFirstLastButtons></mat-paginator>
<button mat-raised-button (click)="exporter.exportTable('csv')" class="export-button">Export Results</button>
So in the child component, I use #input tablesource, and display dataSource. but the result is like this:
The child component seems loaded because the export result button is already there, but the table didn't show. I just to do
console.log(tablesource)
I got []
This is the browser console log:
Any Idea what happened?
I was trying to reproduce here: https://stackblitz.com/edit/angular-hbzpvr
but I am sorry, I am not good at angular, so I am not sure how to load parent to page.

According to your console output, you use tablesource in your child component before it has been updated by the parent component. Instead of creating datasource in ngOnInit of the child component, define the tablesource property as a setter and create datasource in that setter:
#Input() set tablesource(value: Ticket[]) {
console.log(value);
this.dataSource = new MatTableDataSource(value);
}
See this stackblitz for a demo.

Table details with angular and multiple components

I've got a table. Once I click on a row, I load some more details about that row. Also, on-click the table disappears and instead a new div appears with the details. I made it correctly using one component but now I want to separate everything in more components. One for the table and one for the details. I don't want to call the service again on click, so i can just pass the params i need from a component to another on click. This is what I tried so far:
The table:
<table *ngIf="loading == false && openDetail == false">
<thead>
<th>
Name
</th>
<th>
Birth Year
</th>
<th>
Actions
</th>
</thead>
<tbody>
<tr *ngFor="let item of list let i = index" [attr.data-index]="i" (openHeroDetailFromAbout) = "openDetailsFunction($event)">
<!-- <tr *ngFor="let item of list let i = index" [attr.data-index]="i" (click) = "openHeroDetail(item)"> -->
<td>
<mat-form-field class="example-full-width" *ngIf="item.edit == true">
<input matInput placeholder="Name" [(ngModel)]="item.name">
</mat-form-field>
<span *ngIf="item.edit == false || item.edit == undefined">
{{item.name}}
</span>
</td>
<td>
<mat-form-field class="example-full-width" *ngIf="item.edit == true">
<input matInput placeholder="Year" [(ngModel)]="item.birth_year">
</mat-form-field>
<span *ngIf="item.edit == false || item.edit == undefined">
{{item.birth_year}}
</span>
</td>
<td style="width: 160px">
<div class="row">
<div class="col-md-6">
<button type="button" class="mdc-icon-button material-icons" click-stop-propagation (click) = "confirmHero(item, $event)" *ngIf="item.edit == true">
<mat-icon>check</mat-icon>
</button>
<button type="button" class="mdc-icon-button material-icons" click-stop-propagation (click) = "editHero(item, $event)" *ngIf="item.edit == false || item.edit == undefined">
<mat-icon>edit</mat-icon>
</button>
</div>
<div class="col-md-6">
<button type="button" class="mdc-icon-button material-icons" click-stop-propagation (click) = "deleteHero(i, item, $event)">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
and then below the table
<div *ngIf="openDetail == true">
<app-hero-detail></app-hero-detail>
</div>
The first component with openHeroDetailFromAbout is called TableComponent and in there i have this:
openHeroDetailFromAbout(item: any): void {
item.openDetail = true;
console.log(item);
}
the second component is called HeroDetailComponent :
import { Component, OnInit, EventEmitter, Input, Output } from '#angular/core';
#Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html',
styleUrls: ['./hero-detail.component.scss']
})
export class HeroDetailComponent implements OnInit {
#Input() heroName: string; // hero's name
#Output() openDetails = new EventEmitter<any>();
constructor() { }
ngOnInit() {
}
openDetailsFunction(item: any): void {
this.openDetails.emit(item);
this.heroName = item.name;
console.log(item);
}
}
But nothing fires on click on the row. I just pass item object from component to the other and in the detail component show that information. Also the console.log() not work