These are chat archives for angular/material

5th
Jul 2018
Neil Stevens
@StickNitro
Jul 05 2018 08:54
Im having a problem installing material using ng add @angular/material getting error Cannot read property 'startTag' of undefined
michelcve
@michelcve
Jul 05 2018 10:57
@StickNitro Sounds like your angular.json or package.json might have an error in it's syntax?
Accidentally removed a { or } perhaps
Neil Stevens
@StickNitro
Jul 05 2018 11:11
i thought that but get this on a fresh project
michelcve
@michelcve
Jul 05 2018 12:36
@StickNitro Seems like a bug, check this issue: angular/material2#12027
There already is an open PR to fix this issue
Daniel Netzer
@DanielNetzer
Jul 05 2018 12:44
what's the best way to redesign the scss of angular material?
clone the entire library of angular material and work on it slowly?
Nick Arthur
@narthur157
Jul 05 2018 12:46
define "redesign"
Daniel Netzer
@DanielNetzer
Jul 05 2018 12:46
change the position of the mat card header, title, avatar, etc...
Nick Arthur
@narthur157
Jul 05 2018 12:48
you override the classes material provides, or edit the scss variables
depends whether you're making a "new material" or just tweaking things
Daniel Netzer
@DanielNetzer
Jul 05 2018 12:57
but do you close the entire repository or just add a custom scss file to override a few things?
Daniel Netzer
@DanielNetzer
Jul 05 2018 12:59
that's only good for styling the components, not changing the projection structure
Nick Arthur
@narthur157
Jul 05 2018 13:00
ie, you want to change the tempate?
Daniel Netzer
@DanielNetzer
Jul 05 2018 13:00
for a few things yea
Nick Arthur
@narthur157
Jul 05 2018 13:00
for that you'd need to fork it I suspect
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
@DanielNetzer
Jul 05 2018 13:38
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?
SOUARE Saidou
@sVidouSouVre
Jul 05 2018 19:17
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">
{{modem.manufacturer}}
</mat-grid-tile>
</mat-grid-list>
it is not correct because modems is of type modems: Observable<Modem[]>;
I need some help
Tim Burnell
@tmburnell
Jul 05 2018 19:33
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.
SOUARE Saidou
@sVidouSouVre
Jul 05 2018 20:19
@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
@tmburnell
Jul 05 2018 20:22
so did you get it fixed? was it missing the population of modems? looks like that example has a button to populate it.
SOUARE Saidou
@sVidouSouVre
Jul 05 2018 20:24
yes by returning an Modem[] instead of Observable<Modem[]>, as you said the logic is inside the component
SOUARE Saidou
@sVidouSouVre
Jul 05 2018 20:45
so it become<mat-grid-list [cols]="cols" rowHeight="100px">
<mat-grid-tile *ngFor="let modem of modems | async">
{{modem.manufacturer}}
</mat-grid-tile>
</mat-grid-list>
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