I added this : providers: [ { provide: MAT_DIALOG_DATA, useValue: {} }, // { provide: MdDialogRef, useValue: {} }, –> deprecated { provide: MatDialogRef, useValue: {} } —> now ] And it works 🙂 Thanks for your help @methgaard!
Since @angular/material@5.0.0-rc.1 there is special option autoFocus on MatDialogConfig /** Whether the dialog should focus the first focusable element on open. */ autoFocus?: boolean = true; So you can use it as follows: let dialogRef = this.dialog.open(DialogOverviewExampleDialog, { width: ‘250px’, data: { name: this.name, animal: this.animal }, autoFocus: false <============================== this line }); Stackblitz Example
You’re only exporting it in your NgModule, you need to import it too @NgModule({ imports: [ MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule, ] exports: [ MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule, ], declarations: [ SearchComponent, ], })export class MaterialModule {}; better yet const modules = [ MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule ]; @NgModule({ imports: […modules], exports: […modules] , })export class … Read more
This doesn’t work because it is triggered by mouseenter event which doesn’t get fired by most browsers for disabled elements. A workaround is to add matTooltip to a parent element: <div matTooltip=”You cannot delete that” [matTooltipDisabled]=”!isButtonDisabled()”> <button mat-raised-button [disabled]=”isButtonDisabled()”> <mat-icon>delete</mat-icon> </button> </div> The example above assumes that there is a method for determining if the … Read more
It was hard to find documentation on this, but it is possible by using sortingDataAccessor and a switch statement. For example: @ViewChild(MatSort) sort: MatSort; ngOnInit() { this.dataSource = new MatTableDataSource(yourData); this.dataSource.sortingDataAccessor = (item, property) => { switch(property) { case ‘project.name’: return item.project.name; default: return item[property]; } }; this.dataSource.sort = sort; }
CDK is the short form of component dev kit. This signifies that these are general-purpose tools for building components that are not coupled to Material Design From the material2 changelog Several components in core/, such as Overlay, have had their prefix changed to cdk- (short for “component dev kit”). This signifies that these are general-purpose … Read more
Yes. It is possible to jump to a specific stepper by using selectedIndex property of the MatStepper. Also, MatStepper exposes public methods next() and previous(). You can use them to move back and forth. In your template: Add an id to your stepper e.g. #stepper. Then in your goBack() and goForward() methods, pass the stepper … Read more
If you just need to add an attribute in order to trigger CSS rules, you can use the below method: (this does not dynamically create/destroy a directive) <button [attr.md-raised-button]=”condition ? ” : null”></button> Applied the same to your plunker: fork Update: How condition ? ” : null works as the value: When its the empty … Read more
After some research I ended up with this conclusion which solved it for me, hope it will help you too. Step1: Create your own palettes from branding colors. Found this awesome website where you enter your brand color, and it creates a complete palette with the different shades of that brand color: http://mcg.mbitson.com I used … Read more
Use a binding for the value in your template. value=”{{ option.id }}” should be [value]=”option.id” And in your selected value use ngModel instead of value. <mat-select [(value)]=”selected2″> should be <mat-select [(ngModel)]=”selected2″> Complete code: <div> <mat-select [(ngModel)]=”selected2″> <mat-option *ngFor=”let option of options2″ [value]=”option.id”>{{ option.name }}</mat-option> </mat-select> </div> On a side note as of version 2.0.0-beta.12 the … Read more