angular/material2

Material Design components for Angular

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

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

Brad G

@bgilb5

lol i just expected to do it so differently

like ngModel on the mat-option

"filter.selected"

plus im lonely from covid-19

Xephy Lon

@XephyLon

Hello, I'm trying to write unit tests for a component and I keep getting this error Error: MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a custom implementation.

My testbed :

describe('DateSelectComponent', () => {
  // Define Testbed
  let spectator: Spectator<DateSelectComponent>
  const createComponent = createComponentFactory({
    component: DateSelectComponent,
    imports: [
      MatFormFieldModule,
      MatDatepickerModule,
      CommonModule,
      MatMomentDateModule,
      MatInputModule,
      TranslateModule.forRoot({
        defaultLanguage: "ar",
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }
      }),
    ],
    providers: [
      HttpClient,
      {
        provide: MAT_DATE_FORMATS,
        useValue: MY_FORMATS
      }
    ]
  });

  beforeEach(() => spectator = createComponent())

  // Tests
  it('Should load', () => {
    expect(spectator.component).toBeTruthy()
  })
})

Xephy Lon

@XephyLon

After some digging, I managed to fix it:
You need to deep-import the modules for it to work correctly; Guess that's an issue on Angular's side

import { MatFormFieldModule } from "@angular/material/form-field"
import { MatDatepickerModule } from "@angular/material/datepicker";
import { MatInputModule } from "@angular/material/input";
import { MatMomentDateModule } from "@angular/material-moment-adapter";

Brad

@bradtaniguchi

@XephyLon This was changed with the latest release for the material lib for version 9, its been the "recommended" way of importing stuff since v8. I believe during the migration from 8-9 all existing imports should of been manually migrated. If not and you have a lot I'd look into re-running that part of migration again to automatically fix up the import changes

mattfloors

@mattfloors

Good morning everybody

Brad G

@bgilb5

what do yall recommend as far as textbox what to use?

it looks kinda weird with the floating label & the other label

but just a placeholder looks odd too

Brad

@bradtaniguchi

The one you showed is the one we use most of the time, matches with some of the newer google products (like gmail login)

Where communities thrive

People

Repo info

Activity