Angular Material — Radio Buttons, Ripple Effects, and Select Dropdowns

Angular Material is a popular UI framework based on Material Design for Angular.

In this article, we’ll look at how to use Angular Material into our Angular project.

Radio Button

We can add a radio button with Angular Material.

For example, we can write:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatRadioModule } from '@angular/material/radio';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatRadioModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  favoriteFruit: string;
  fruits: string[] = ['apple', 'orange', 'grape'];
}

app.component.html

<div>
  <label>Pick your favorite fruit</label>
  <mat-radio-group [(ngModel)]="favoriteFruit">
    <mat-radio-button *ngFor="let fruit of fruits" [value]="fruit">
      {{fruit}}
    </mat-radio-button>
  </mat-radio-group>
  <div>Your favorite fruit is: {{favoriteFruit}}</div>
</div>

We import the MatRadioModule and FormsModule to add the radio button with data binding.

Then in app.component.html , we add the mat-radio-group to bind the value with ngModel .

Inside it, we loop through the fruits array and render the buttons with the mat-radio-button component.

The value has the radio button value.

Now when we click on a radio button, we should see the favoriteFruit value change since we bind the radio button value with ngModel .

Ripples

We can add a ripple effect when we click or tap on something.

For example, we can write:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatRippleModule } from '@angular/material/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatRippleModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myColor = 'lightyellow'
}

app.component.html

<div>
  <div matRipple [matRippleColor]="myColor">
    hello world
  </div>
</div>

We import the MatRippleModule to add the effect.

Then we add the matRipple directive to the div with the matRippleColor to set the color of the ripple effect.

Now when we click or tap on ‘hello world’, we see the ripple effect.

Select

We can add a select dropdown with the MatSelectModule .

For example, we can write:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSelectModule,
    MatFormFieldModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  toppings = new FormControl();
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
}

app.component.html

<div>
  <mat-form-field appearance="fill">
    <mat-label>Toppings</mat-label>
    <mat-select [formControl]="toppings" multiple>
      <mat-select-trigger>
        {{toppings.value ? toppings.value[0] : ''}}
        <span *ngIf="toppings.value?.length > 1">
          (+{{toppings.value.length - 1}}
          {{toppings.value?.length === 2 ? 'other' : 'others'}})
        </span>
      </mat-select-trigger>
      <mat-option *ngFor="let topping of toppingList" [value]="topping">
        {{topping}}</mat-option>
    </mat-select>
  </mat-form-field>
</div>

We add the FormsModule and ReactiveFormsModule to let us bind the value selected with a reactive form control.

In the template, we rendered the toppingList with the mat-option component.

The mat-select-trigger lets us trigger the dropdown.

We display the selected items by rendering the toppings string.

Now we should see a dropdown that lets us pick one or more items from the list.

Conclusion

We can add radio buttons, ripple effects, and dropdowns with Angular Material.