Check out our Angular Book Series.

How do I use a compareWith Function with Angular Material?

In this screencast I talk about using a compareWith function with Angular Material.

Find the original vid on YouTube and check out the source on GitHub

Why won't my mat-select select items?

I'm working on an Angular project that includes a large legacy code base, and just spent a few hours trying to get a mat-select to actually select an item. No matter what I did it seemed like the selected item was always null. In case you're running into something similar, I'm going to show you how I fixed it.

First, I set up an Angular project and installed ng material.

Then, in a component, create a data provider:


dataSource = [
{label: 'one'},
{label: 'two'},
{label: 'three'},
{label: 'four'},
{label: 'five'},
{label: 'six'},
{label: 'seven'},
{label: 'eight'},
{label: 'nine'},
{label: 'ten'}
];

I just created a bunch of generic objects with a label property for the purposes of this sample. Also create a field to hold the selected value:


selectedItem;

Now, create your mat-select. Start with the mat-form-field:


<mat-form-field>
<!-- more stuff here -->
</mat-form-field>

Inside that mat-form-field place the


<mat-select placeholder="Select a Number" [(ngModel)]="selectedItem" >
<!-- more stuff here -->
</mat-select>

This is simple, it uses the ngModel to bind the selected item in the mat-select to the selectedItem property in the component class.

Now add the options:


<mat-option *ngFor="let item of dataSource" >
{{item.label}}
</mat-option>

This uses mat-option and loops over the data source to create the items. Run the code and you should see something like this:

Select an item and you'll see the placeholder stays the same:

Whenever I tired to access the selectedItem in code it was always null or blank. What was going on? Did you see my omission yet?

When creating the mat-options, they need a value:


<mat-option *ngFor="let item of dataSource" [value]="item" >
{{item.label}}
</mat-option>

Without these the mat-select has no idea how to match the selected item to an item in the data provider and the ngModel value will never get set. Once I put in the value everything started working again.

Play with the code here.

How do I switch between different NG Material Button Types?

ng-materal provides a bunch of button variants. Each button type is an HTML button that offers identical functionality, but with slightly different designs and colors. Here is an example of two buttons:


<button mat-flat-button>My Button 1</button>
<button mat-stroked-button>My Button 2</button>

If you drill into the button class, you'll see that all the button variants are implemented in the same code base, as directives.

I was doing a code review on a current project and saw that the code was conditionally determining which button type to display:


<button mat-flat-button *ngIf="condition">My Button 1</button>
<button mat-stroked-button *ngIf="!condition">My Button 1</button>

I was bugged by the fact that we were implementing two button components in our code for what was essentially a style change. That's when I started digging into the specific implementation and discovered that the primary difference between a mat-flat-button and a mat-stroked-button was style changes.

I proposed this alternate approach:


<button mat-button [ngClass]="condition?'mat-flat-button':'mat-stroked-button'">My Button 1</button>

We use the ngClass directive to conditionally flip the style between the flat-button and the stroked-button. It solved our issue with less code.

All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.