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)

SOUARE Saidou
@sVidouSouVre
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
Roel
@roelzkie15
Anyone know how to fullscreen a dialog into its parent container?
Max
@P0ntiuS
Hi, if anyone used material and kendo in production, explain the main pros and cons when using these UI modules, thanks.
masber
@masber_twitter
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
@tmburnell
@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
@tmburnell
@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
@tmburnell

@masber_twitter looking at this:
https://github.com/angular/material2/blob/master/src/lib/stepper/stepper-vertical.html
and
https://github.com/angular/material2/blob/master/src/cdk/stepper/stepper.ts

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
@tmburnell
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?
Roel
@roelzkie15
@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
@tmburnell

@roeldeveloper28
this is not the best option, but you can extend theirs and give it a container. I did this here for the snacker
https://stackblitz.com/edit/angular-material-tooltip-in-container-2?file=app%2Fdynamic-overlay-container%2Fdynamic-snack-bar.ts

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

Francis Torda
@freeman29
Hi guys! is it possible to change snackbar translateY:0% to translateY:16px?
Christopher Jaeger
@caJaeger
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
@StickNitro
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)
venkatakrishna874
@venkatakrishna874

Hi
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-form-field>
<mat-autocomplete  #NBPageAutocomplete="matAutocomplete" cdkScrollable >
  <mat-option  *ngFor="let option of suggestedNBPageNames" [value]="option">
                {{ option }}
  </mat-option>
</mat-autocomplete>

component code

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

constructor(public scroll: ScrollDispatcher) {}
ngAfterViewInit() {
    this.scroll.scrolled().subscribe((data: CdkScrollable) => {
       console.log(data);
      //make an HTTP call when it reaches to the end, to add some more data
    });
  }
Paul W.
@binaryPUNCH
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?
chetanbirajdar
@chetanbirajdar
Hi does any one have any demo , where I could achieve server side pagination , with angular material table. Any help is appreciated
David Ly
@dly5891
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.

parker789
@parker789
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?
AhsanNissar
@AhsanNissar
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?
losorio35
@losorio35
hello guys, some admin template free, thank
?
losorio35
@losorio35
Bryan Harris
@gufi
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
@tarlepp
gufi: have you tried .mat-select-value { color: red !important; } ?
Bryan Harris
@gufi
indeed i have, it doesnt even show in the inspection that it was applied ( and overriden )
Tarmo Leppänen
@tarlepp
hmm, are you sure that your style file is loaded on that page?
Bryan Harris
@gufi
thats where i'm at now. there are other styles in this same component that are applied though
ya its there mat-select-value[_ngcontent-c5] {
color: #FFFFFF !important; }
missed the leading . in the paste
Bryan Harris
@gufi
hours of fighting... wish i could get product owner to just let me put a mat-card on the page
hmm it appears the [_ngcontent-c5] causes it to fail
if i remove that it works
Bryan Harris
@gufi
yea... thats what does it because that doesnt have a _ngcontent-c5 attribute on the div for mat-select-value
basically have to do this outside of scss
Carson Full
@CarsonF
I'm trying to add error/hint elements to form field inside of a custom component, but they are being placed in the wrong spot.

Usage:

<app-custom>
  <mat-error>custom error</mat-error>
</app-custom>

In Custom component:

<mat-form-field>
  <input .../>
  <ng-content select="mat-error, mat-hint"></ng-content>
</mat-form-field>

Is there something I'm missing?

If I put the mat-errors directly under the form field it works fine. But form field itself can't seem to select inside of my ng-content.
Carson Full
@CarsonF
Ok so I guess the solution is moving the form-field out of the component and having the component implement MatFormFieldControl
jj-julia
@jj-julia

Hey people

I am working on a project where we would like our designers to be able to theme angular-material. Not just the colours, but other aspects that would reflect our brand and unique challenge. Sometimes at a component level, but a lot of the time at a project wide level.

We would also like to be able to customise the Angular Material docs to create a living style guide that also contains our custom components/extensions as well as other information and standards that are used for our specific project.

How do others here approach the situation or suggest approaching it?

Neil Stevens
@StickNitro
@CarsonF Checkout this stackblitz https://stackblitz.com/edit/angular-number-spinner, I encountered this yesterday and solved by adding a mat-error to the custom component in the mat-form-field as you would normally then add your <ng-content select=“[‘mat-error’]”></ng-content>. When consuming your component you would add mat-error as if you were using a mat-form-field