These are chat archives for angular/material

5th
Mar 2018
cdskill
@cdskill
Mar 05 2018 09:21

Hi guys :-) I'm literaly stuck since 2 days on this ... so I want to assign multiple paginator on multiple datatable generated...
For exemple the server send me 4 tables, each one with their pageSize and their pagination...

How can I perform that ?

I can actually generate multiple datatable but not appliying the pagination on each one.

This is how my datatable are generated (mat-paginator is not working):

<mat-table #table [dataSource]="castMatatableDataSource(subcategory.content.rows)">
                        <ng-container *ngFor="let column of subcategory.content.columns" [matColumnDef]="column.prop">
                            <mat-header-cell *matHeaderCellDef>{{column.name}}</mat-header-cell>
                            <mat-cell *matCellDef="let row" [innerHtml] ="row[column.prop]">{{row[column.prop]}}</mat-cell>
                        </ng-container>

                        <mat-header-row *matHeaderRowDef="subcategory.content.props()"></mat-header-row>
                        <mat-row *matRowDef="let row; columns: subcategory.content.props()"></mat-row>
                    </mat-table>
                    <button (click)="show(table)">SHOW</button>
                    <mat-paginator #paginator
                                [pageSize]="subcategory.content.per_page"
                                [pageSizeOptions]="[subcategory.content.per_page]">
                    </mat-paginator>

thank you in advance

Hadi Mousavi
@mousavidev
Mar 05 2018 14:05
Hello everybody,
How to create a datepicker similar to the material datepicker?
I want to create a persian datepicker.
Githamza
@Githamza
Mar 05 2018 15:15

I'm using angular material datatable

My datasource is simply an array

My problem is when I add new values to the data array , I don't see it immediately on the datatable

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
import { AjouttextService } from '../ajouttext.service';
import { DataSource } from "@angular/cdk/collections";
import { Observable } from "rxjs/Observable";
import { nomchamp } from '../model';

@Component({
  selector: 'app-datatable',
  templateUrl: './datatable.component.html',
  styleUrls: ['./datatable.component.css']
})
export class DatatableComponent implements OnInit {

  constructor(private dataService: AjouttextService) { }
  data: nomchamp[] = [{ id: "33", text: "HAHA" }, { id: "55", text: "bzlblz" }];

  displayedColumns = ['text'];
  dataSource = new MatTableDataSource(this.data);
  //new UserDataSource(this.dataService);


  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
  }
  ngOnInit() {
  }
  ajoutText(newtext: String) {
    let nouv: nomchamp = { id: "44", text: newtext };
    this.data.push(nouv);
  }
}
cdskill
@cdskill
Mar 05 2018 15:27
@Githamza dans ta fonction, ajoutText rajoute un parametre table: any ou tu donne le #table dans ton .html
ensuite tu appelles la fonction renderRows() dessus
ajoutText(newtext: String, table:any) {
    let nouv: nomchamp = { id: "44", text: newtext };
    this.data.push(nouv);
    table.renderRows();
  }
Githamza
@Githamza
Mar 05 2018 15:38
@cdskill Merci je testerai ca ce soir
Githamza
@Githamza
Mar 05 2018 22:51
@cdskill I have done what you have asked me to do I got this error ERROR TypeError: table.renderRows is not a function