Tags down


Angular - add new row to mat-table when using FormControlArray as dataSource

By : Razvan Paraschivescu
Date : October 14 2020, 02:24 PM
I think the issue was by ths following , MatTable doesn't automatically re-render when using an array as the datasource... you need to call the renderRows() method on the table to update the table in the view.
code :
 @ViewChildren(MatTable) _matTables
 (click)="addRow(c.controls.contacts, i)
addRow(elem: FormArray, i) {
    console.log('add row');

        id: [0],
        contactName: ['kris'],
        emailId: ['kris@gmail.com'],
        adminAgent: [false],
        collateralAgent: [false],
        trusteeAgent: [false],

Share : facebook icon twitter icon

Angular Material Table (<mat-table>) with datasource with multiple inner ARRAY attributes

By : Han
Date : March 29 2020, 07:55 AM
Any of those help So finally found a clean solution with a few not so well documented nuances:
code :
dataSourceArray1 =  new MatTableDataSource(); <===**NUANCE**. should be clearly mandated.
dataSourceArray2 =  new MatTableDataSource(); <===**NUANCE**. should be clearly mandated.

ngOnInit() {
    .map( (twoArrays) => {
        this.dataSourceArray1.data = twoArrays.array1; <==NUANCE. 'data' update triggers change.
        this.dataSourceArray2.data = twoArrays.array2; <==NUANCE. 'data' update triggers change.
        return twoArrays;
    .subscribe( (arrays) => {
        // do nothing.
    } );

Angular mat-table dataSource.paginator and dataSource.sort and dataSource.filter not working as expected

By : Marlo Wilcox
Date : March 29 2020, 07:55 AM
wish of those help to Pierre Mallet for the invested time in that detailed answer, that saved me tons of time. But as you can see inside the comments, i had problems to get the this.dataSource.sort and this.dataSource.paginator running.
After i posted my comment, i searched a bit and found out, that there is a problem with the ViewChild from Angular. The ViewChild doesn't catch anything with *ngIf in ngAfterViewInit(). So to get both running, you need to do the following:
code :
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
private paginator: MatPaginator;
  private sort: MatSort;

  @ViewChild(MatSort) set matSort(ms: MatSort) {
    this.sort = ms;

  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;

  setDataSourceAttributes() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

    if (this.paginator && this.sort) {

Iterate through dataSource in mat-table Angular

By : iron rob
Date : March 29 2020, 07:55 AM
it should still fix some issue Try using index with ngFor, to track your iterations. Hope its helpful.
code :
<div *ngFor="let element of arrayMain, let myIndex=index" id = "{{element}}" class="my_item"> <div><span class="skuska"><span class="mat-subheading-2">{{element}}</span></span></div> <mat-table #table [dataSource]="dataSource[myIndex]" matSort> <ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames"> <mat-header-cell *matHeaderCellDef mat-sort-header > {{column.value}} </mat-header-cell> // your same code </div>

<table mat-table> dataSource doesn't show up even though I Fully Copy it from Material Angular

By : user3073167
Date : March 29 2020, 07:55 AM
it should still fix some issue Working StackBlitz link.
in ts: changed the below lines
code :
daftarMurid: FormGroup;

this.daftarMurid = this.formBuilder.group(

Why is the <mat-table> without a Datasource not displayed in Angular 7

By : rishitha
Date : March 29 2020, 07:55 AM
hop of those help? In fact, it is possible to create a material table without a datasource. You need to make sure you made the header definitions with displayed columns and all.
Example - html file:
code :
<table mat-table class="mat-elevation-z8">
  <ng-container matColumnDef="someValue">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Some Value Header</th>

  <ng-container matColumnDef="someOtherValue">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>
      Some Other Value Header

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
displayedColumns: string[] = ['someValue', 'someOtherValue'];
<table class="mat-table" >
  <tr class="mat-header-row">
    <th class="mat-header-cell">A</th>
    <th class="mat-header-cell">B</th>
  <tr class="mat-row">
    <td class="mat-cell">A</td>
    <td class="mat-cell">B</td>
Related Posts Related Posts :
  • Ripple effect is not displaying in button in angular app - Angular-Material
  • p-dataView Getting values of selected rows
  • How to append an Observable array to existing one consumed via Angular async pipes?
  • Angular 2 routing with map
  • Length of observable array using 'as' syntax
  • Angular 6, directive ngOnChanges does not work with a lambda expression?
  • Angular animation jumps to undesired value upon completion
  • Inject a service with constructor in the main.ts
  • Angular Material Flex Layout - center aligning menu buttons
  • Http-Get-Function seems to be called multiple times in one call and always returns an empty array
  • VSCode Debugger Just sits there and does nothing
  • How to get file name instead of path with ngModel and ng2-file-upload?
  • Angular7 Form Validation on button push or property not in html
  • Highcharts triangle (or any type of marker pointer) in stacked bars
  • S3 Bucket referencing old code/api? Angular 5
  • ngModel kills output with white screen
  • Index does not load in ngFor Angular 2+
  • angular: How to change an imported component's class to change color?
  • Angular Http Caching and Race Conditions
  • Angular 6, how to update angular input field while looping?
  • How can I get html elements classes inside Angular Component?
  • Angular 6: How to use FormGroup to create formControlName dynamically?
  • # base routing is not working in angular 6
  • DXpopup position offset top relative to a variable
  • Angular 5 Material Multi-level Carousel style SideNav Menu (no dropdown)
  • Get the latest accumulated result of a scan instead of repeating it?
  • Angular redux @effect: Error on retriving the payload
  • Access to fetch at 'https://api.kendozone.com/auth/login' from origin[...] has been blocked by CORS policy
  • Can I use the component of One Application into another Application?
  • How to change date format in ngbDatepicker input field in angular bootstrap?
  • Warning messages are displaying even after the data present in the input field
  • ArrayBuffer as source (image tag) / Display image from Blob
  • How can I install highcharts-angular *and* highcharts?
  • Disable selected option from drop down One to drop down Two in angular 2 - Material
  • How can I debounce this Angular 7 async validator that uses combineLatest internally?
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org