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
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
;p
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
image.png
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)
Brad G
@bgilb5
alright
Brad G
@bgilb5
is there anyway to have the mat-group tabs show always?
Rini30
@Rini30

@Rini30
i am using drag and drop material ui for dragging an image all around.But i am facining an issue on how to drag and drop in into a next container?.I have defined a div tag and linked it.But still unable to drop the image.
Any help
here is the code

<div class="box1" cdkDropList #image="cdkDropList" [cdkDropListConnectedTo]="[nextblock]" (cdkDropListDropped)="drop($event)" [cdkDropListData]="url">
<input type="file" (change)="fileChange($event)" placeholder="Upload file" >
<img #filter id="blah" [src]="url" alt="your image" cdkDrag/>
</div>

<div class="box2" cdkDropList #nextblock="cdkDropList" [cdkDropListConnectedTo]="[image]" [cdkDropListData]="[filter2]" (cdkDropListDropped)="drop($event)" (cdkDropListEntered)="setColor()">
<img #filter2>
</div>
<div class="box2">Box 2</div>
<div class="box2">Box 3</div>

Rini30
@Rini30
can anyone help me on that
please
Alejandro Sanz Díaz
@altsanz
Hi, I'm updating Angular using "ng update". Should @angular/core and @angular/material match version? @angular/core is at 9.1 and material offers 9.2
Derek
@derekkite
@altsanz v9 is the important part. https://github.com/angular/components/blob/master/CHANGELOG.md and the same at angular/angular will tell you any breaking changes
Sanket Thotange
@iamsank8
how to show angular material datepicker inline?