angular-material2

Error: No provider for Overlay!

by

I managed to eliminate this error by adding this to app.module.js: import {OVERLAY_PROVIDERS} from “@angular/material”; @NgModule({ imports: [… ], declarations: […], providers: [OVERLAY_PROVIDERS], bootstrap: […] }) Edit (May 2018): OVERLAY_PROVIDERS is now deprecated. use the OverlayModule instead import { OverlayModule } from ‘@angular/cdk/overlay’; @NgModule({ imports: [ OverlayModule ], declarations: […], providers: […], bootstrap: […] })

Angular-Material2: Align text and md-icon vertically to match vertical style?

by

This is a common issue when using <md-icon>. To align the icon and text, you can put your text inside a span and apply style to that: <div> <md-icon>home</md-icon><span class=”aligned-with-icon”>Sample Text</span> </div> In your component.css: .aligned-with-icon{ position: absolute; margin-top: 5px; margin-left: 5px; /* optional */ } You can also use relative position if you’ll be … Read more

Dynamically load a component inside a Material MatDialog

by

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

Create (click) event on MatTab Material

by

Isn’t it possible to add simple click event on dynamically created tabs? – no i think, it isn’t possible, but you can use (selectedTabChange) on <mat-tab-group> as: <mat-tab-group (selectedTabChange)=”yourFn($event)”> The event-Object holds an index, so you can do something like this: yourFn($event){ this.fetchAccounts(this.banks[$event.index].id) } Example: https://stackblitz.com/edit/angular-xurhan

Angular 4: When and why is @Inject is used in constructor?

by

@Inject() is a manual mechanism for letting Angular know that a parameter must be injected. import { Component, Inject } from ‘@angular/core’; import { ChatWidget } from ‘../components/chat-widget’; @Component({ selector: ‘app-root’, template: `Encryption: {{ encryption }}` }) export class AppComponent { encryption = this.chatWidget.chatSocket.encryption; constructor(@Inject(ChatWidget) private chatWidget) { } } In the above we’ve asked … Read more

Angular – Material Table, is it possible to update rows without entire table refresh?

by

Took me some time but I finally got everything working. Your answers and different approaches helped aswell. So, here’s my CRUD implementation if anyone gets in trouble with this: https://github.com/marinantonio/angular-mat-table-crud Screenshot: Or you can check project demo: https://marinantonio.github.io/angular-mat-table-crud/ Key parts are in table.ts file: …. addNew(issue: Issue) { const dialogRef = this.dialog.open(AddDialogComponent, { data: {issue: … Read more

Checkbox angular material checked by default

by

You can either set with ngModel either with [checked] attribute. ngModel binded property should be set to ‘true’: 1. <mat-checkbox class = “example-margin” [(ngModel)] = “myModel”> <label>Printer </label> </mat-checkbox> 2. <mat-checkbox [checked]= “myModel” class = “example-margin” > <label>Printer </label> </mat-checkbox> 3. <mat-checkbox [ngModel]=”myModel” class=”example-margin”> <label>Printer </label> </mat-checkbox> DEMO

How to change angular material datepicker format

by

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

Angular5 – TypeError: Cannot read property ‘template’ of undefined

by

I forgot to define the header cell for the actions. So it was throwing that error. Here is the code which solved this problem. <ng-container matColumnDef=”actions”> <mat-header-cell *matHeaderCellDef></mat-header-cell> <mat-cell *matCellDef=”let row”> <button mat-button (click)=”showDetails(row)”>DETAILS</button> <button mat-button (click)=”editItem(row)”>EDIT</button> <button mat-button (click)=”deleteItem(row)”>DELETE</button> </mat-cell> </ng-container>