Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 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)

MattHubbell
@MattHubbell
@crooksey I've mixed bootstrap and material for the exact same reason. The only place I ran into issues was with the bootstrap navbar. I started with bootstrap but moved to material. All was working well until Chrome version 64.x came out. Then my material tab control tabs would disappear. Other than that, I have had little issues with compatibility.
Aldo Velasco
@aldovelco
Hi guys,
has anyone of you used LESS for theming? I can only find examples using SASS
Alexandre Lagane
@alagane
Is it possible to read old documentation version?
Rohit Sodhia
@rohitsodhia
Looking for some help. I've added MatFormFieldModule to my modules, but i still get 'mat-form-field' is not a known element. Any advice?
brookesb91
@brookesb91
Is the module importing MatFormFieldModule also importing the component you’re trying to use it in?
@rohitsodhia
Rohit Sodhia
@rohitsodhia
@brookesb91 Yah, it was all correct... ironically ,my problem was I needed to kill ng serve and start it back up... noticing I need to do that a lot these days...
brookesb91
@brookesb91
@rohitsodhia feel you there - seems to always get to a point where it refuses to recompile corretly. Glad you’re sorted.
Rohit Sodhia
@rohitsodhia
Thanks for responding :)
srikarn
@srikarn
Hi guys
anyone able to use matDialog with entryComponent and a lazy loaded module?
srikarn
@srikarn
never mind I got it working
Ítalo Souza
@ItaloSouza626_twitter
hello guys, how can i centralize a element with angular material?
Rohit Sodhia
@rohitsodhia

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?

cdskill
@cdskill

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
Hello everybody,
How to create a datepicker similar to the material datepicker?
I want to create a persian datepicker.
Githamza
@Githamza

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
@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
@cdskill Merci je testerai ca ce soir
Githamza
@Githamza
@cdskill I have done what you have asked me to do I got this error ERROR TypeError: table.renderRows is not a function
L33tCh
@L33tCh
@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
@mousavidev
hi, why did you use gulp in material project?
cdskill
@cdskill
my issue is solved thx
chanddessai10
@chanddessai10
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 )
Toni
@SpeedoPasanen
@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
chanddessai10
@chanddessai10
@funkizer I get that
Githamza
@Githamza
Hello , If I create an app using angular with firebase to store and get data, car I host it in github static pages ?
MattHubbell
@MattHubbell
@Githamza you can deploy your app to firebase. Doeload and install firebase-tools
bwhiting2356
@bwhiting2356
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
@crooksey
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
chanddessai10
@chanddessai10
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?
satishgorijala-github
@satishgorijala-github
Value not pertaining even after it met the condition.

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

ngOnInit() {

 this.tabselectedIndex = 0;
    this._router.events
    .filter(e => e instanceof RoutesRecognized)
    .pairwise()
    .subscribe((e: any[]) => {
      console.log(this.previousRoute);
      this.previousRoute = e[0].urlAfterRedirects;
        if (this.previousRoute === '/contactus') {
                    this.tabselectedIndex = 1;
                    alert(this.tabselectedIndex);
                  }
              });

}

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
VishwajitShinde
@VishwajitShinde
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?
satishgorijala-github
@satishgorijala-github
@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>
                  </ng-container>
labyed
@labyed
hey guys, is there a way to select only months and years in datepicker, ty
Nate Gardner
@natejgardner
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'.

Template

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

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
@crooksey
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>
        <mat-grid-tile-header>Clocked In</mat-grid-tile-header>
    </mat-grid-tile>
    <mat-grid-tile >
        <mat-grid-tile-header>Clocked Out</mat-grid-tile-header>
    </mat-grid-tile>

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

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

</mat-grid-list>
Filip Białek
@fbialek
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
@embryologist

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
@jakkn
is there a limitation on which mat- components that support errorStateMatcher?