Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jun 18 2019 18:50
    @StephenFluin banned @piotr-mamenas
Ally
@AllySummers

is it just me or in mat-table row/cell, is there no way to access another array? i.e.

<mat-cell *matCellDef="let criterion; let i = index" [formGroupName]="i" [innerText]="criteria[i].questionNumber"></mat-cell>

and

<mat-cell *matCellDef="let criterion; let i = index" [formGroupName]="i">
  <mat-checkbox formControl="criterion.get('correct')"><span class="sr-only">Correct (yes/no)</span></mat-checkbox>
</mat-cell>
turns out the issue was i accidentally had "multiTemplateDataRows" in the mat-table
jimkeecn
@jimkeecn
Hi guys, have anyone of you have create an angular-element with angular material?I have so much trouble with it, e.g style not properly displayed, value not being detected, sometime have to do it mannual detection, etc....
I have create a project that reflect this issue. https://github.com/jimkeecn/buildxactDemo, in this demo, the table is not display properly. the mat-input placeholder does not lift up after I write something on the field. even werider, If I added a mat-button inside the template, the rest of the content is gone...
Michael Prentice
@Splaktar
@bgilb5 for imports? Webstorm/IntellJ does a good job at autocompleting those
@jimkeecn there are a number of known issues with Angular Elements and Material, you can find them here: https://github.com/angular/components/issues?q=is%3Aopen+is%3Aissue+label%3Aelements. If you submit a new one and want me to tag it with elements please ping me in the issue and I’ll add it.
jimkeecn
@jimkeecn
thanks will do!
Brad G
@bgilb5
whats the recommended way to do class="mr-4" in material?
couldn't find anything on google
Brad G
@bgilb5
is there a way to programatically set MatSort direction and active?
Ally
@AllySummers
i have an angular material mat-table, and i'm dynamically creating it from a form on that page and want to allow the user to change the data set after they've already done so. i'm having an issue where (depending how i do it), it either doesn't re-render the table, or the console give me lots of errors along the lines of "cannot find x form field", is there a way i can fix this?
nevermind, fixed it! just needed to change it from myFormArray.reset() to myFormArray.clear()
Will Furnell
@willfurnell
Hey, I'm writing some unit tests for components that import Material components. I'm getting warnings like ''mat-error' is not a known element - what's the best way to sort these out please? Thanks! :)
Will Furnell
@willfurnell
Adding to the imports in the tests cause the following errors: Unexpected value 'MatCardModule' declared by the module 'DynamicTestModule'
Will Furnell
@willfurnell
Ah figured it out! I had those elements in declarations rather than imports!
Brad G
@bgilb5
why doesn't mat-list-option support ngModel lol
Brad
@bradtaniguchi
because on option isn't a model, you need to put it in a mat-select right?
Brad G
@bgilb5
image.png
just as far as ngModel="filter.selected"
Brad
@bradtaniguchi
Ah I'm thinking of mat-select, your talking about mat-selection-list
Brad G
@bgilb5
even the matselect has the same problem lol
Brad
@bradtaniguchi
mat-select works with angular forms just fine, idk if mat-selection-list supports forms tho
Brad G
@bgilb5
instead of a list of { selected: true } for example you have to provide another list of the selected values
Brad
@bradtaniguchi
Uh with mat-select you can use ngModel and compare the values with the ng-model to get basically anything to work. You'd have to work around the forms api for mat-selection list since it doesn't do anything for forms (AFAIK)
Brad G
@bgilb5
yeah i know i can wire up like 4 functions to get it work
just seems wonky it doesn't work both ways out of the box
Brad
@bradtaniguchi
which ways?
Brad G
@bgilb5
ngModel on either the list versus each single item
Brad
@bradtaniguchi
mat-selection-list isn't really a form field, which makes sense. mat-select is
Brad G
@bgilb5
it doesn't work on mat-select either
it wants a seperate list
Brad
@bradtaniguchi
What doesn't work on mat-select?
Brad G
@bgilb5
two way binding to a "selected" property
Brad
@bradtaniguchi
you don't deal with that
you pass in the ngModel value to the <mat-select> (along with the other template form properties like an <input> tag) and it will automatically "match" with the values set for the options
Brad G
@bgilb5
yes, but maybe i don't want it to be that way?
Brad
@bradtaniguchi
If you have complex values (like an object) where you need to do custom selection logic (like select an id within the object to compare to the options) you can pass in compareFn
Why not?
Brad G
@bgilb5
i'm not sure, just used to angularJS way
but i can make it work the other way
Brad
@bradtaniguchi
I don't recommend looking for doing stuff the "AngularJS" way most of the time, since AngularJS is pretty different, especially in regard to bindings
Brad G
@bgilb5
true, just hard to adjust
since they have such similar names "ng-model"
Brad
@bradtaniguchi
the idea is similar, but Angular goes about it differently. The components from the mat libraries can do what they want, but the same approach (where you pass in the ng-model value) is the same as before
Brad G
@bgilb5
<mat-form-field>
                <mat-label>Filters</mat-label>
                <mat-select multiple [(ngModel)]="selectedFilters" name="filters">
                  <mat-option *ngFor="let filter of filters$ | async" [value]="filter.filterid">{{ filter.name }}</mat-option>
                </mat-select>
              </mat-form-field>
this is the correct way right?
Brad
@bradtaniguchi
I don't think the multiple will work correctly with the mat-options without compareFn, since its not smart enough even with single selections
if you take away multiple your still comparing objects to objects which I don't think works if the references aren't the same
Brad G
@bgilb5
it seems to work
Brad
@bradtaniguchi
If it works then why ask? :P