angular-material2

Filtering specific column in Angular Material Table with filtering in angular?

You have to override the filterPredicate of your dataSource. Here’s an example of how to do it: Working demo Essentially, you want to specify what properties in your data the filter is applied to: this.dataSource.filterPredicate = function(data, filter: string): boolean { return data.name.toLowerCase().includes(filter) || data.symbol.toLowerCase().includes(filter) || data.position.toString().includes(filter); };

Angular Material2 theming – how to set app background?

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

How to change angular material datepicker format

You need to provide an object containing the formats you wish to use. The object should look something like: export const MY_FORMATS = { parse: { dateInput: ‘LL’, }, display: { dateInput: ‘YYYY-MM-DD’, monthYearLabel: ‘YYYY’, dateA11yLabel: ‘LL’, monthYearA11yLabel: ‘YYYY’, }, }; You then need to add that in to your providers array, like so: import … Read more

Angular 4 Material table highlight a row

Update for Newer Material Version (md –> mat): html: <!– Add the highlight class in row definiton of md-table –> <!– Add click event to pass the selected row index –> <mat-row *cdkRowDef=”let row; columns: displayedColumns;” [ngClass]=”{‘highlight’: selectedRowIndex == row.id}” (click)=”highlight(row)”> </mat-row> Original Answer: You can do it by using ngClass and a flag like … Read more

How to prevent angular material mat-menu from closing?

You just add (click) = “$event.stopPropagation()” to the parent element of these calendars. Like below, <mat-menu class=”date-range-menu” #dateTimeMenu=”matMenu”> <div fxLayout=”row”> <div fxLayout=”column” (click)=”$event.stopPropagation();”> <b>From</b> <mat-calendar></mat-calendar> </div> <div fxLayout=”column” (click)=”$event.stopPropagation();”> <b>To</b> <mat-calendar></mat-calendar> </div> </div> </mat-menu> Stackblitz demo.

Dynamically load a component inside a Material MatDialog

There are different options: 1) Built-in structural directive ngComponentOutlet <ng-container *ngComponentOutlet=”data.component”></ng-container> Example 2) Using angular material cdk. More precisely you can use PortalModule from secondary entry point @angular/cdk/portal dialog.component.ts import { ComponentPortal } from ‘@angular/cdk/portal’; @Component({…}) export class DialogDialog { portal: ComponentPortal<any>; constructor(… @Inject(MAT_DIALOG_DATA) public data: any) { } ngOnInit() { this.portal = new ComponentPortal(this.data.component); … Read more

Can’t bind to ‘formControl’ since it isn’t a known property of ‘input’ – Angular2 Material Autocomplete issue

While using formControl, you have to import ReactiveFormsModule to your imports array. Example: import {FormsModule, ReactiveFormsModule} from ‘@angular/forms’; @NgModule({ imports: [ BrowserModule, FormsModule, ReactiveFormsModule, MaterialModule, ], … }) export class AppModule {}

Select All mat option and deselect All

Use code as below create function on click each mat-option and select()/deselect() all option: See stackblitz:https://stackblitz.com/edit/angular-material-with-angular-v5-jsgvx6?file=app/app.component.html TS: togglePerOne(all){ if (this.allSelected.selected) { this.allSelected.deselect(); return false; } if(this.searchUserForm.controls.userType.value.length==this.userTypeFilters.length) this.allSelected.select(); } toggleAllSelection() { if (this.allSelected.selected) { this.searchUserForm.controls.userType .patchValue([…this.userTypeFilters.map(item => item.key), 0]); } else { this.searchUserForm.controls.userType.patchValue([]); } } HTML: <form [formGroup]=”searchUserForm” fxFlex fxLayout=”column” autocomplete=”off” style=”margin: 30px”> <mat-select placeholder=”User Type” … Read more