Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Jul 11 2016 19:26

    Splaktar on master

    fix(toast): apply theming corre… perf(icon): better handling of … fix(list): copy ng-show, ng-hid… and 49 more (compare)

  • Jun 15 2016 16:14

    Splaktar on v1.1.0-rc.5

    release: version 1.1.0-rc.5 (compare)

  • May 14 2016 05:55

    Splaktar on master

    feat(panel): initial implementa… update(panel): promise logic im… update(panel): add and remove p… and 44 more (compare)

  • May 05 2016 20:47

    Splaktar on v1.1.0-rc4

    release: version 1.1.0-rc4 (compare)

  • May 05 2016 20:47

    Splaktar on v1.1.0-rc3

    release: version 1.1.0-rc3 (compare)

  • May 03 2016 22:28

    Splaktar on es6-tutorial

    Prepare clean start Remove bow… install angular-material And i… working version of starter-app and 19 more (compare)

  • May 03 2016 22:22

    Splaktar on master

    Tutorial Readme updates Updates for Tutorial #2 Update README with tutorial ste… and 56 more (compare)

  • May 01 2016 22:56

    Splaktar on fixBlurryRightNavIe11

    fix(sidenav): rightNav button a… (compare)

  • May 01 2016 22:37

    Splaktar on master

    fix(dialog): don't clobber md-d… update version number in packag… update(changelog): sort so 1.1.… and 1 more (compare)

  • May 01 2016 22:34

    Splaktar on fixSideNavDemo

    docs(sidenav): leftNav text isn… (compare)

  • Apr 27 2016 04:14

    Splaktar on fixSideNavDemo

    docs(sidenav): invalid `md-whit… (compare)

  • Apr 27 2016 03:54

    Splaktar on master

    update(changelog): add missing … fix(toolbar): remove transition… fix(tests): Cleans up the DOM a… and 2 more (compare)

  • Apr 23 2016 01:32

    Splaktar on master

    update(docs): improve docs for … update(docs): renamed `md-text-… fix(list): clickable list-items… and 71 more (compare)

  • Apr 11 2016 03:20

    Splaktar on improveExtendThemeDoc

    update(docs): improve docs for … (compare)

  • Apr 11 2016 03:15

    Splaktar on improveExtendThemeDocs

    update(docs): improve docs for … (compare)

  • Apr 11 2016 02:57

    Splaktar on updateThemingDocs

    update(docs): renamed `md-text-… (compare)

  • Apr 11 2016 02:48

    Splaktar on master

    fix(demo, codepen): use secure … fix(build, layout): remove depr… update(build): remove stale bow… and 72 more (compare)

  • Apr 11 2016 02:48

    Splaktar on v1.1.0-rc2

    release: version 1.1.0-rc2 (compare)

  • Mar 19 2016 03:00

    Splaktar on master

    fix(checkbox): pointer events d… update(tests): remove disabled/… fix(datepicker): enable scrolli… and 20 more (compare)

  • Mar 13 2016 05:41

    Splaktar on v1.0.6

    Revert "fix(select): made selec… update(layout): add layout-nowr… fix(whiteframe): update breakpo… and 57 more (compare)

Rohit Sodhia
Thanks for responding :)
Hi guys
anyone able to use matDialog with entryComponent and a lazy loaded module?
never mind I got it working
Ítalo Souza
hello guys, how can i centralize a element with angular material?
Rohit Sodhia

I see the mat-button doc says I can change the bg color by:

Buttons can be colored in terms of the current theme using the color property to set the background color to primary, accent, or warn.

But that doesnt seem to be the css color property nor the html property. Can anyone help me figure out how to affect this?


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>

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

thank you in advance

Hadi Mousavi
Hello everybody,
How to create a datepicker similar to the material datepicker?
I want to create a persian datepicker.

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';

  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 };
@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 };
@cdskill Merci je testerai ca ce soir
@cdskill I have done what you have asked me to do I got this error ERROR TypeError: table.renderRows is not a function
@Githamza Hmm. I see another option is to deliver the data by subscribing to an observable stream but there is little info on how to implement and a few calls logged on getting better documentation around it: angular/material2#8227
I haven't tried it though but maybe the example in the comments of the issue can help (or possible one of the linked issues).
Hadi Mousavi
hi, why did you use gulp in material project?
my issue is solved thx
In typescript how can we add a tooltip to mat-input using the id through ts code? (Here the mat-input-field is generated through ngFor, and I am using the dynamically provided ID which angular provides )
@chanddessai10 why do you need to do it in ts? you can add a mat-tooltip to the element in the template and pass it a dynamic value
@funkizer I get that
Hello , If I create an app using angular with firebase to store and get data, car I host it in github static pages ?
@Githamza you can deploy your app to firebase. Doeload and install firebase-tools
You could also deploy to github pages, but firebase hosting is awesome
deploy from the command line, built in CDN, secure. Lots of benefits
Luke Crooks
Morning everyone, any idea why the following is not rendering correclty? I expexted all of my buttons in the list to be scrollable, however they just render as: https://stackblitz.com/edit/angular-cccnjp?file=app%2Fsidenav-responsive-example.html
image.png In this I have the capability to rename the field where rename value should be unique. If rename value is duplicate I need to show <mat-icon> only to that particular field with duplicate value. Can anybody help me out with this?
Value not pertaining even after it met the condition.

<mat-tab-group [selectedIndex]="tabselectedIndex">

ngOnInit() {

 this.tabselectedIndex = 0;
    .filter(e => e instanceof RoutesRecognized)
    .subscribe((e: any[]) => {
      this.previousRoute = e[0].urlAfterRedirects;
        if (this.previousRoute === '/contactus') {
                    this.tabselectedIndex = 1;


Though it met the critieria and the alert popup shows value as "1", but in html for the mat-tab the value is not changing to "1". Always the value is "0". what i am missing here
Hello Guys
Why my mat-table columns are not sorting?
<mat-header-cell *matHeaderCellDef mat-sort-header="true" > {{ column.myHeader }} </mat-header-cell> . Am I missing anything into this?
@VishwajitShinde - You can try as below
<mat-table #table [dataSource]="dataSource" matSort>
                  <ng-container matColumnDef="colname">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> column heading </mat-header-cell>
hey guys, is there a way to select only months and years in datepicker, ty
Nate Gardner
I'm having a bit of trouble with the datepicker- getting Can't bind to 'matDatePicker' since it isn't a known property of 'input'.


          <input [matDatePicker]="myDatePicker">
          <mat-datepicker #myDatePicker></mat-datepicker>

It's imported in my app module:

import { ..., MatDatepickerModule, MatNativeDateModule,...} from '@angular/material`;
@NgModule({...,imports: [ ...,MatDatepickerModule, MatNativeDateModule,...],...})
Any ideas on what to try?
Luke Crooks
Anyone know how I can force dynamic rendered content into a certain grid list? Example here: https://stackblitz.com/edit/angular-cccnjp-3dieg1?file=app%2Fsidenav-responsive-example.html
    <mat-grid-list cols="2"  rowHeight="8:1">
        <mat-grid-tile-header>Clocked In</mat-grid-tile-header>
    <mat-grid-tile >
        <mat-grid-tile-header>Clocked Out</mat-grid-tile-header>

    <!-- render this inside Clocked In Column -->
    <mat-grid-tile *ngFor="let user of usersIn">
        <button mat-raised-button color="accent">

    <!-- render this inside Clocked out Column -->
    <mat-grid-tile *ngFor="let user of usersOut">
        <button mat-raised-button color="warn">

Filip Białek
hi there! can anybody share with me sass function or mixin for generating sass map with custom map for material color palette? so basically I would like to have a sass function that I can pass one color and it returns whole map with a palette.
Ahmad Abu Maizer

I have a mat-form-field with input/select elements and I am having hard time changing the placeholder/floating label color on ng-valid or ng-pending without changing the encapsulation, any advice would be really appreciated
the only way that I was able to change the placeholder/floating label is using the following,

body .mat-input-placeholder {
  color: rgba(13, 131, 209, 0.699);

how can I add ng-pending and ng-valid as well

Jakob Knutsen
is there a limitation on which mat- components that support errorStateMatcher?
question motivated by this error "Can't bind to 'errorStateMatcher' since it isn't a known property of 'mat-radio-group'."
has anyone used Angular Material inside an Ionic app? I'm using Ionic as a PWA and in my desktop layout I would like to use some material components. I have the modules imported, and I think I imported the styles, but it's not looking right.
YuvaRaj Raghunapu
Hi all,
am trying to using .html <mat-toolbar>My App</mat-toolbar> after installing the material; but am getting error as "'mat-toolbar' is not a known element:
“ Any help?
Hi guys, I have a really annoying issue related to implementing material tools and can't work out what is going wrong, any help would be much appreciated!
so i installed material, cdk and browseranimation, imported them in my app.module.ts file but whenever I try to use a tool like <mat-form-field> in the html the dashboard compiles but the browser returns the following error:
Error: Template parse errors: 'mat-form-field' is not a known element
spent more time than i'd care to admit on this issue... xD
@RavC357 make sure you import MatInputModule
@kwilliams-curago Yup, i have imported that