If anybody is interested I found a solution (not sure if it is the best one). Just disabling the default close operation so the popup does not close on backround click, while closing it with data param on background click. matDialogRef.disableClose = true;//disable default close operation matDialogRef.backdropClick().subscribe(result => { matDialogRef.close(dataToReturn); }); This way the calling … Read more
Well, I figured out the following: parse: { dateInput: ‘DD.MM.YYYY’, }, display: { dateInput: ‘DD.MM.YYYY’, monthYearLabel: ‘MMM YYYY’, dateA11yLabel: ‘LL’, monthYearA11yLabel: ‘MMMM-YYYY’, }, with parse.dateInput: you can let the user enter any type of date with any format, and the date adapter will reformat it to the format you specify in this attribute with display.dateInput … Read more
If you are using Material2, you can use Angular Flex Layout for responsiveness. It compliments Angular2 well and is lightweight. Basically Material2 + Flex-layout is equivalent to Bootsrap library. Here’s an example of how flex-layout can be used for grid system/responsiveness with Angular/Material2. Sample Code showing use of flex-layout API: <div fxShow.xs=”true” fxShow=”false” >Screen size … Read more
My use case was slightly different so your update didn’t work for me, but I found a slightly different solution that does the trick: @ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger; Then you can use this to close the dropdown options: this.autocomplete.closePanel(); Make sure to also import ViewChild: import { ViewChild } from ‘@angular/core’; Works like a charm.
You could use the (selectedTabChange) event. Check Material2#tabs. Template: <mat-tab-group color=”primary” (selectedTabChange)=”onLinkClick($event)”> … </mat-tab-group> Component: import { MatTabChangeEvent } from ‘@angular/material’; // … onLinkClick(event: MatTabChangeEvent) { console.log({ event }); this.router.navigate([‘contacts’]); }
You have to build a custom DateAdapter. A custom DateAdapter is a class which implements the DateAdapter interface (it’s actually an abstract class that should be extended). It must have a bunch of predefined function implementations and have to be registered as a useClass for the DateAdapter provider. providers: [{provide: DateAdapter, useClass: CustomDateAdapter }] The … Read more
According to Official Documentation of Angular Material: Including a theme is required to apply all of the core and theme styles to your application. To get started with a prebuilt theme, include one of Angular Material’s prebuilt themes globally in your application. You can simply add the following to your style.css in order to get … Read more
md-snackbar provides a service to provide custom config. One the properties of config is extraClasses that allows to add CSS classes to the snack bar container (doc). extraClasses can be used with ::ng-deep to override the default CSS classes. Here’s an example: component.ts: Requires following import in the component: import {MdSnackBar, MdSnackBarConfig} from ‘@angular/material’; (providing … Read more
I’ve just had the same issue and have solved it using Will’s comment to the original post, adding a click handler with $event.stopPropagation to the cell as the direct parent to the button. I’ll add it here as a solution in case anyone else comes here looking for the same answer. I have a Material … Read more
First, you need to add MdDialogRef to your dialog component export class AddBookComponent { constructor(private dialogRef: MdDialogRef<AddBookComponent>) { } } Then use dialogRef.close to return the data save() { this.dialogRef.close({ data: ‘data’ }); }