Questions tagged datasource

Explore the latest questions and answers asked by our top developers.

mat-table showing header columns but not rows

I am dynamically loading a mat-table by doing the following: <mat-table mat-table [dataSource]="dataSource"> <ng-container *ngFor="let col of dispColumns" matColumnDef="{{col}}"> <mat-header-cell *matHeaderCellDef>{{col}}</mat-header-cell> <mat-cell *matCellDef="let element "> {{element[col]}} </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="dispColumns"></mat-header-row> <mat-row *matRowDef="let row; columns: dispColumns;"></mat-row> </mat-table> <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons aria-label="Select page of query data"> </mat-paginator> and I am able to see the […]

Angular dataSource doesn’t sort

It’s the first time I’m using Stackoverflow, so please tell me if I’m doing anything wrong. I’m trying to make header names into clickable sorting buttons. From what I understand of the code, it gains data from "projects". After following different tutorials, I presume I have to replace "projects" with a sorted datasource in order […]

By Robin Doorenbosch
Categorized as angular, datasource, typescript Tagged , ,

Setting number of items for cdk-virtual-scroll-viewport

I have found a number of tutorials for using the cdk-virtual-scroll-viewport, but there is one thing missing from every single tutorial I have found so far: how do I tell the viewport how many items are in my list? I have implemented this using a BehaviorSubject for the datastream according to this tutorial and a […]

Pass input data with table data (Angular 12)

I have a scenario where I have a table which has expandable rows & with each expanded row there is an input field to add one comment. My question is, how to send the table data with that input data? Html- <div> <button (click)="save()" type="submit"> <mat-icon> save </mat-icon> </button> </div> <table mat-table [dataSource]="dataSource" multiTemplateDataRows> <ng-container […]

Item Array as Datasource for NgFor

Just want to ask if is it possible to search an item in an array of objects and use it as datasource for my angular table? Can you share the syntax please? Basically, i have an array of objects consisting of Id and its json file. Populate its data. Look for an item that matches […]

By Seigfred Mondez
Categorized as angular, arrays, datasource, grid Tagged , , ,

How do I update my Angular Table dataSource with data from an Observable

Im trying to display data in my Angular Material Table, that I receive from my backend. Everything works fine as long as my _timelogService.getAllTimelogs() function returns an Observable of dummy data which I hard coded into the function. As soon as I make an actualy HTTP POST request to my backend – and return an […]

Search doesn’t work in list containing image – Angular 12

Html <input matInput (keyup)="applyFilter($any($" placeholder="Search here"> Component applyFilter(filterValue: string) { this.dataSource.filter = filterValue.trim().toLowerCase(); console.log(this.dataSource.filter); if (this.dataSource.paginator) { this.dataSource.paginator.firstPage(); } } I cannot find why the same function works in some of my components & doesn’t work properly in the others. The search function is working well in lists having data (without image/file; only text type […]

By Valkyrie 30
Categorized as angular, datasource, image, mat-table, search Tagged , , , ,

How do I pass data fields in the Kendo UI grid through a pipe in angular 11?

I’m working in an Angular 11 project using the Kendo UI grid for Angular. I’ve been asked to pipe data for one of the columns through a custom pipe: @Pipe({ name: ‘customPipe’ }) export class CustomPipe implements PipeTransform { transform(id: string): string { if (id === ‘not found’) { return ‘—‘; } return id; } […]

By gib65
Categorized as angular, datasource, kendo-grid, pipe Tagged , , ,

Api call empty table

I’m trying to fill a table with data that I get from an API call, I managed to see the data in my console but in my view file I can’t see anything. Service.ts : private URL = "https://xxxxxxxxxxxxx"; getAccount() { let json = { "login_id": "xxxx", "login_hash": "xxxx", "login_company": "x"} let body = JSON.stringify(json); […]

By Ishay
Categorized as angular, api, datasource, typescript Tagged , , ,

Observer subscribe doesn’t load the data to dataSource, using material table Angular

I am using Angular material table but the datasource doesn’t show any data on my screen. I have a add-person component which loads some data in ‘ContactsList: Contacts[];’ I use api to return the data to the ContactsList and want to load the data into datasourse in order to show the data on material table, […]

By Userstation
Categorized as angular, datasource Tagged ,
1 2

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us