angular-material2

How to align button right inside Dialog angular material?

by

You can use the align HTML attribute: <div mat-dialog-content> <p>What’s your favorite animal?</p> <mat-form-field> <input matInput [(ngModel)]=”data.animal”> </mat-form-field> </div> <div mat-dialog-actions align=”end”> <button mat-button [mat-dialog-close]=”data.animal” cdkFocusInitial>Ok</button> </div> Demo Note: The reason why setting an align=”end” attribute works on the dialog’s actions container is because the align attribute is used to add flexbox properties to the … Read more

How to add data dynamically to mat-table dataSource?

by

I have found a solution for this problem, basically if you do: this.dataSource.data.push(newElement); //Doesn’t work But if you replace the complete array then it works fine. So your final code must be : this.socket.on(‘newMessage’, function(event) { const data = this.dataSource.data; data.push(event); this.dataSource.data = data; }); You can see the issue here -> https://github.com/angular/material2/issues/8381

Angular 2 Material 2 datepicker date format

by

Here is the only solution I found for this one: First, create const: const MY_DATE_FORMATS = { parse: { dateInput: {month: ‘short’, year: ‘numeric’, day: ‘numeric’} }, display: { // dateInput: { month: ‘short’, year: ‘numeric’, day: ‘numeric’ }, dateInput: ‘input’, monthYearLabel: {year: ‘numeric’, month: ‘short’}, dateA11yLabel: {year: ‘numeric’, month: ‘long’, day: ‘numeric’}, monthYearA11yLabel: {year: … Read more

Get rid of white space around Angular Material modal dialog

by

Updated Answer From the official documentation: Styling overlay components Overlay-based components have a panelClass property (or similar) that can be used to target the overlay pane. You can override the default dialog container styles by adding a css class in your global styles.css. For example: .custom-dialog-container .mat-dialog-container { /* add your styles */ } After … Read more

onselected event in md-select in Angular 4

by

For Material version >= 6 Use the (selectionChange) event on mat-select. <mat-form-field> <mat-select placeholder=”State” (selectionChange)=”someMethod($event.value)”> <mat-option *ngFor=”let state of states” [value]=”state.value”> {{ state.viewValue }} </mat-option> </mat-select> </mat-form-field> In the event method, $event.value contains the currently selected [value]. Reference to the official documentation. @Output() selectionChange: EventEmitter< MatSelectChange > Event emitted when the selected value has been … Read more

Angular Material2 theming – how to set app background?

by

If you want to change the theme’s background color for the entire app in a clean way, you can override your theme with the following. // Set custom background color $custom-background-color: map_get($mat-blue-grey, 50); // -or- Can set colour by hex value too $custom-background-color: #628cc9; $background: map-get($theme, background); $background: map_merge($background, (background: $custom-background-color)); $theme: map_merge($theme, (background: $background)); … Read more

Angular2 material dialog self close

by

If you wanna close it from the dialog: constructor(private dialogRef: MatDialogRef<MyDialogComponent>){ } closeDialog(){ this.dialogRef.close(); } If you wanna close it from the parent of the dialog: constructor(private matDialog: MatDialog){} //anywhere let dialogRef = this.matDialog.open(MyDialogComponent); dialogRef.close();