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)

Nick Arthur
but you may be better off making your own component and using some of the code from material. You can base it off the cdk version, which has less styles and such
Daniel Netzer
anyone aware of a good guide to theming angular material? like this - https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1 but more updated?
hello i want to use angular material mat-grid-list
as below
<mat-grid-list cols="modems.length" rowHeight="100px">
<mat-grid-tile *ngFor="let modem of modems | async">
it is not correct because modems is of type modems: Observable<Modem[]>;
I need some help
Tim Burnell
can you populate modems in the component outside the async pipe? I have never really tried to get the async to work, but i dont like to hide logic like that and always do it in the component.
@tmburnell you are true. i followed the tutorial (Reactive Forms)https://angular.io/guide/reactive-forms#when-to-set-form-model-values-ngonchanges, thats why i did not noticed it before as it is done in the angular.io TUTORIAL(https://angular.io/tutorial/toh-pt6)
Tim Burnell
so did you get it fixed? was it missing the population of modems? looks like that example has a button to populate it.
yes by returning an Modem[] instead of Observable<Modem[]>, as you said the logic is inside the component
so it become<mat-grid-list [cols]="cols" rowHeight="100px">
<mat-grid-tile *ngFor="let modem of modems | async">
the magic is here [cols]="cols"
the expression template cols is the modems.length where modems is of type Modems[], that is set when i subscribe the Observable<Modem[]>
its works this way too cols="{{cols}}" thanks a lot @tmburnell
Anyone know how to fullscreen a dialog into its parent container?
Hi, if anyone used material and kendo in production, explain the main pros and cons when using these UI modules, thanks.
hi, I am trying to use stepper to show history events in chronological order and I need to disable mouse events. how can I do that?
but I don't want to trigger any mouse event, otherwise the step will be completed which I am trying to avoid
Tim Burnell
@roeldeveloper28 are you trying to make a div full screen? or just make a div fill its parent?
if you are trying to do full screen you can look at this: https://github.com/jpilfold/ngx-image-viewer
they use a dependency screenfull that applies the HTML5 spec to full screen the image.
this kind of sounds like what you want.
Tim Burnell
@P0ntiuS i have never used kendo … however i did just take a look at it. And they do have quite the feature set, however the ui looks very entry level. What i mean does not look very clean compared to material and/or bootstrap.
Tim Burnell

@masber_twitter looking at this:

looks like click is called and executes step.select() … neither have logic to disable the events. Also i dont see a good way with angular.
So you will either have to overwrite one of the material classes or make your own.

Tim Burnell
Anyone know why in this example: https://stackblitz.com/edit/stepper-buttons?file=app/stepper-overview-example.ts
the ripple seems fire on buttons that you did not click on?
@tmburnell im trying to make a div fill its parent. Because the problem with material2 you cant set a parent container for a MatDialog
Tim Burnell

this is not the best option, but you can extend theirs and give it a container. I did this here for the snacker

the only issue is you have to keep it up to date with the latest version.

Francis Torda
Hi guys! is it possible to change snackbar translateY:0% to translateY:16px?
Christopher Jaeger
What's best practice for using material for structural things like accordians, dialogs, buttons, menus, tabs, but changing the style to match your design requirements?
Neil Stevens
Anyone able to answer a question please?
I want to know if it is possible to pass data to a mat-drawer with a component as its content, I know I could set a variable on the parent component when the user clicks open and have that bound to the mat-drawer component but that seems like a hack so I wondered if there was a better way to do this (similar i guess to how the mat-dialog does it)

can anyone help me to listen scroll event on mat-autocomplete overlay box

Template code

<input matInput placeholder="Notebook Page" formControlName="notebookPage" [matAutocomplete]="NBPageAutocomplete" >
<mat-autocomplete  #NBPageAutocomplete="matAutocomplete" cdkScrollable >
  <mat-option  *ngFor="let option of suggestedNBPageNames" [value]="option">
                {{ option }}

component code

import { ScrollDispatcher } from '@angular/cdk/overlay';

constructor(public scroll: ScrollDispatcher) {}
ngAfterViewInit() {
    this.scroll.scrolled().subscribe((data: CdkScrollable) => {
      //make an HTTP call when it reaches to the end, to add some more data
Paul W.
If I'd like to reduce the scale of an entire UI component, such as a mat-form-field, is there an easy way?
I realize Material encourages consistency across platforms, but I really need to customize this one instance. Possible or not?
Hi does any one have any demo , where I could achieve server side pagination , with angular material table. Any help is appreciated
David Ly
Angular Material breaks when importing a feature module into a different angular app. Angular Material is imported in both modules.

When imported only into main app that imports the feature module, the feature module's components are no longer styled with angular material and instead look like plain unstyled html.

When imported only in the feature module and not the main app, the main app fails to load due to using angular material components in the component templates.

hey all, anyone had to make a somewhat responsive table using mat-table? i’m unable to get each header / cell to overflow with ellipsis with an 80% column width limit
I have column widths defined using the cdk-column-name classes using flex: 0 0 5%;. Now, i’d like to make that column wrap if the content overflows past a max width of 80%. 80% of the 5% that is.
Has anyone experienced this or can help me out?
I am populating my dropdown with a property say 'subjects' in component.ts file while that property is getting initialized by data coming from JSON DTO using services. So now i have another property say 'teacherSubjects' which is getting data from another JSON DTO using services. I want to hide or remove the data in my dropdown if it is also present in the other property of 'teacherSubjects'. How can i do that?
hello guys, some admin template free, thank
Bryan Harris
what is the simplest way to override the color on a single angular select box... i have a one off page where the back ground is too dark for the default dark black color
i've tried adding .mat-select-value { color } in the scss of the component but it wont take for some reason
Tarmo Leppänen
gufi: have you tried .mat-select-value { color: red !important; } ?
Bryan Harris
indeed i have, it doesnt even show in the inspection that it was applied ( and overriden )
Tarmo Leppänen
hmm, are you sure that your style file is loaded on that page?
Bryan Harris
thats where i'm at now. there are other styles in this same component that are applied though