angular-material2

No value accessor for form control with name: ‘recipient’

by

You should add the ngDefaultControl attribute to your input like this: <md-input [(ngModel)]=”recipient” name=”recipient” placeholder=”Name” class=”col-sm-4″ (blur)=”addRecipient(recipient)” ngDefaultControl> </md-input> Taken from comments in this post: angular2 rc.5 custom input, No value accessor for form control with unspecified name Note: For later versions of @angular/material: Nowadays you should instead write: <md-input-container> <input mdInput [(ngModel)]=”recipient” name=”recipient” placeholder=”Name” … Read more

Angular 4 Material table highlight a row

by

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?

by

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.

Angular 5 and material – How to change the background color from SnackBar component

by

Angular < V15 You have to use the panelClass option (since v6) to apply classes on a snackbar like this: this.snackBar.open(message, action, { duration: 2000, panelClass: [‘blue-snackbar’] }); CSS (in global styles.scss): .blue-snackbar { background: #2196F3; } See the Stackblitz example Angular >= v15 The Angular team did add global css variable So you still … Read more

Material Components for the Web vs Angular Material 2 [closed]

by

Full disclosure: I work on Material Components for the web, so my opinion may be a bit biased 🙂 TL;DR use whichever library helps you build your UI in the most efficient way possible, or use them side-by-side. Check out our angular2 integration example angular-mdc-web to see how to wrap a MDC-Web component using ng2. … Read more

how to define index in angular material table

by

Can you add index to let element; let i = index;” as you’d do with *ngFor? <mat-row *matRowDef=”let row; columns: displayedColumns; let i = index”></mat-row> Or like so: <ng-container matColumnDef=”index”> <mat-header-cell *matHeaderCellDef> Index </mat-header-cell> <mat-cell *matCellDef=”let element; let i = index;”>{{i}}</mat-cell> </ng-container> Working Example: https://stackblitz.com/edit/angular-acdxje?file=app/table-basic-example.html

How to add icon to mat-icon-button

by

Just add the <mat-icon> inside mat-button or mat-raised-button. See the example below. Note that I am using material icon instead of your svg for demo purpose: <button mat-button> <mat-icon>mic</mat-icon> Start Recording </button> OR <button mat-raised-button color=”accent”> <mat-icon>mic</mat-icon> Start Recording </button> Here is a link to stackblitz demo.