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
@bradtaniguchi
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?
Jason Fritsche
@JasonFritsche
Hello Everyone
Sanket Thotange
@iamsank8
how to set mat-calendar date from code? I am using angular 9.
Lisa Copeland
@lisacopeland
I am using a select with multiple selection and even if I explicitly patch a value of '' into the control after the form has been displayed it shows the first item selected in the list - anyone seen this or has a workaround?
Brad
@bradtaniguchi
I've worked with a lot of selects with multi-select on and idk if I've seen that, my guess is the value of the first item just so happens to have the same "default value", or the auto-select first value input is being passed
Evan Stoll
@evanjs
Hey guys, struggling to bind a mat-select to a map right now. I keep getting Value must be an array in multiple-selection mode
Is there no way to use a <mat-select multiple> with a map or etc?
Might be looking at this the wrong way
Brad
@bradtaniguchi
Your trying to pass in a new Map() as the value?
or a {} (POJO)
Evan Stoll
@evanjs
The backing collection is initialized with new Map()
Brad
@bradtaniguchi
Yea you'll need to probably manipulate the values in the map and display it using an array before passing it into the select
Evan Stoll
@evanjs
Yeah, I sort of figured. I realized I can display it just fine in most approaches, but it's getting the value back that doesn't work quite as well.
I also didn't realize that the value of a mat-select is ... a sorted list of all selected values in multiple selection mode
Anthony Nahas
@AnthonyNahas
I am proud to introduce today ngx-storage-firebaseui , open source angular library created with angular material for firebase storage. Upload with one click multiple images to firebase. If you are familiar with ngx-auth-firebaseui, you would to add this lib to your project! Any feedback and comments are welcome! A big thanks for the angular community
https://github.com/AnthonyNahas/ngx-storage-firebaseui
Dave
@beazergood
👋hi there, I have a mat-menu that is triggered via (contextmenu) event in my component. I would like to break the menu out into a child component to clean up my template code and to also better understand how ViewChild works in angular. I have searched SO and found a few helpful posts most notably this one: https://stackoverflow.com/questions/48343082/mat-menu-and-button-in-different-components
However, I can get the menu to open via a button in my parent component but I would like to trigger it to open via the right click event (contextmenu) from inside the typescript file as opposed to the template. Can anyone point me in the direction as to how I'd achieve this? I have referenced the child component in my parent class as follows: @ViewChild(MatMenuTrigger) childComponentMenu: ItemContextMenuComponent
where ItemContextMenuComponent is the child component where the menu is. I have tried this.childComponentMenu.openMenu() in the function that runs on right-click but it doesn't work.
I have a stackblitz on the go here: https://stackblitz.com/edit/angular-xkfdns-92t9sn
Dave
@beazergood
The above stackblitz doesn't have my edits to it (forgot to fork properly). This one does: https://stackblitz.com/edit/angular-xkfdns-psqygv
I'm just looking to open the menu in the child component from the menu-overview-example file.
Dave
@beazergood
☝️got there in there end! Was just a matter of connecting the dots correctly and getting a better understanding of how the matMenuTrigger relates to the child component.
Ian Kaney
@ikaney
I've been researching for a while and wondered if anybody could help.
I have the cdkDrag directive on a div which can be dragged around. This is located within a container that has scrollbars on.
I assumed cdkScrollable would force the container to scroll if dragging one of the items out of view, is this incorrect thinking? What would be the best way to achieve this?
Ian Kaney
@ikaney
I've setup a Stackblitz:
Miguel Vargas
@miguel-vargas
Good morning! I was looking to start contributing to material2. Specifically to the documentation. I found the angular/material2-docs-content repo but it seems PRs are to be against the angular/components repo. How would you modify the markdown or html for the APIs of material components?
Brad
@bradtaniguchi
@miguel-vargas I believe the docs are generated from the comments in the code itself, such is true for the core Angular repo
SAGO
@SAGOlab
Hi there is possible to set attribute of button from another component? I think something like set mat-fab-button nor mat-button from another component wtih @Input() decorator, or something like that?
Brad
@bradtaniguchi
@SAGOlab sounds like you want to change the directive on a button based upon some condition