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 = [
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:
Now, create your mat-select. Start with the mat-form-field:
<!-- more stuff here -->
Inside that mat-form-field place the
<mat-select placeholder="Select a Number" [(ngModel)]="selectedItem" >
<!-- more stuff here -->
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" >
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" >
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.
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.