Angular Material — Dialogs, Dividers, and Expansion Panels

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.

Dialog

Angular Material has a dialog component.

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 { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button'

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

app.component.ts

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'dialog-content-example-dialog',
  template: 'hello world',
})
export class DialogContentExampleDialog {}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public dialog: MatDialog) {}

  openDialog() {
    const dialogRef = this.dialog.open(DialogContentExampleDialog);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }}

app.component.html

<div>
  <button mat-button (click)="openDialog()">Open dialog</button>
</div>

We add the MatDialogModule to let us add the dialog.

The MatButtonModule lets us add a button.

In the AppComponent , we inject the dialog.

Then in the openDialog method, we call dialog.open to open the dialog.

Divider

We add the mat-divider component to add a divider into our template to separate different elements.

For example, we can write:

import { BrowserModule } from '[@angular/platform-browser](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fangular%2Fplatform-browser "Twitter profile for @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 { MatDividerModule } from '[@angular/material](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fangular%2Fmaterial "Twitter profile for @angular/material")/divider';
import { MatListModule } from '@angular/material/list'

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

app.component.html

<div>
  <mat-list>
    <mat-list-item>Item 1</mat-list-item>
    <mat-divider></mat-divider>
    <mat-list-item>Item 2</mat-list-item>
    <mat-divider></mat-divider>
    <mat-list-item>Item 3</mat-list-item>
  </mat-list>
</div>

We imported the MatDividerModule and MatListModule to let us add the mat-divider component into the mat-list component.

This will add a line between the items.

Expansion Panel

We can add an expansion panel to show an accordion.

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 { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatExpansionModule,
    MatButtonModule,
    MatFormFieldModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatInputModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div>
  <div class="example-action-buttons">
    <button mat-button (click)="accordion.openAll()">Expand All</button>
    <button mat-button (click)="accordion.closeAll()">Collapse All</button>
  </div>
  <mat-accordion class="example-headers-align" multi>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Personal data
        </mat-panel-title>
        <mat-panel-description>
          Type your name and age
          <mat-icon>account_circle</mat-icon>
        </mat-panel-description>
      </mat-expansion-panel-header>

      <mat-form-field>
        <mat-label>Name</mat-label>
        <input matInput>
      </mat-form-field>

   </mat-expansion-panel>
    <mat-expansion-panel disabled>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Destination
        </mat-panel-title>
        <mat-panel-description>
          Type the country name
          <mat-icon>map</mat-icon>
        </mat-panel-description>
      </mat-expansion-panel-header>

      <mat-form-field>
        <mat-label>Country</mat-label>
        <input matInput>
      </mat-form-field>
    </mat-expansion-panel>

    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Day of the trip
        </mat-panel-title>
        <mat-panel-description>
          Inform the date you wish to travel
          <mat-icon>date_range</mat-icon>
        </mat-panel-description>
      </mat-expansion-panel-header>

      <mat-form-field>
        <mat-label>Date</mat-label>
        <input matInput [matDatepicker]="picker" (focus)="picker.open()"
          readonly>
      </mat-form-field>
      <mat-datepicker #picker></mat-datepicker>
    </mat-expansion-panel>
  </mat-accordion>
</div>

We add the mat-expansion-panel into the mat-accordion component to form an accordion.

The expansion panels have the mat-expansion-panel-header to add the header.

mat-panel-title has the title.

mat-panel-description has the description.

Conclusion

We can add dialogs, dividers and accordions with Angular Material.