Category: Angular

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.

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.

Checkbox

We can add checkboxes 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 { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatCheckboxModule
  ],
  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 {
  checked = false;
  indeterminate = false;
  disabled = false;

constructor() { }
}

app.component.html

<div>
  <section class="example-section">
    <mat-checkbox class="example-margin" [(ngModel)]="checked">Checked
    </mat-checkbox>
    <mat-checkbox class="example-margin" [(ngModel)]="indeterminate">
      Indeterminate</mat-checkbox>
  </section>
</div>

We added the MatCheckboxModule and then add the variables to bind the checked values of the checkbox to with ngModel .

Chips

We can add chips to add small containers for some short information.

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 { MatChipsModule } from '@angular/material/chips';

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

app.component.html

<div>
  <mat-chip-list aria-label="Fish selection">
    <mat-chip>One fish</mat-chip>
    <mat-chip>Two fish</mat-chip>
    <mat-chip color="primary" selected>Primary fish</mat-chip>
    <mat-chip color="accent" selected>Accent fish</mat-chip>
  </mat-chip-list>
</div>

We add the MatChipsModule to add the chips.

Then in the template, we add the mat-chip-list component as the container for chips.

mat-chip is the chip.

Datepicker

Angular Material comes with a date picker.

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

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

app.component.html

<div>
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker">
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <button mat-raised-button (click)="picker.open()">Open</button>
</div>

We imported the MatDatepickerModule , MatNativeDateModule , MatFormfieldModule , MatButtonModule , and MatInputModule to so that we can add the date picker into our app.

In the template, we add the mat-form-field to use as the date picker container,.

mat-label has the label.

input has the input.

mat-datepicker has the date picker.

Also, we have a button to call picker.open() to open the date picker.

Conclusion

We can add a checkbox and date picker with Angular Material.

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.

Button Toggle

We can add button toggles with the MatButtonToggleModule .

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 { MatButtonToggleModule } from '@angular/material/button-toggle';

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

app.component.html

<div>
  <mat-button-toggle-group name="fontStyle">
    <mat-button-toggle value="bold">Bold</mat-button-toggle>
    <mat-button-toggle value="italic">Italic</mat-button-toggle>
    <mat-button-toggle value="underline">Underline</mat-button-toggle>
  </mat-button-toggle-group>
</div>

We add the MatButtonToggleModule into app.module.ts .

Then we can use the mat-button-toggle-group with the mat-button-toggle to add the button toggle.

We can change the appearance with the appearance attribute:

<div>
  <mat-button-toggle-group name="fontStyle" appearance="legacy">
    <mat-button-toggle value="bold">Bold</mat-button-toggle>
    <mat-button-toggle value="italic">Italic</mat-button-toggle>
    <mat-button-toggle value="underline">Underline</mat-button-toggle>
  </mat-button-toggle-group>
</div>

Card

Cards are containers that we can put elements in.

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

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

app.component.html

<div>
  <mat-card class="example-card">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>Shiba Inu</mat-card-title>
      <mat-card-subtitle>Dog Breed</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image
      src="https://material.angular.io/assets/img/examples/shiba2.jpg"
      alt="Photo of a Shiba Inu">
    <mat-card-content>
      <p>
        The Shiba Inu
      </p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-button>LIKE</button>
      <button mat-button>SHARE</button>
    </mat-card-actions>
  </mat-card>
</div>

We add the MatCardModule to add a card.

Then we add the mat-card for the main card container.

mat-card-header is the card header.

mat-card-title has the title.

mat-card-subtitle has the subtitle.

The mat-card-image directive is used to add an image into the card.

mat-card-content has the main card content.

mat-card-actions has the actions for the card.

Conclusion

We can add button toggles and cards into our Angular app with Angular Material.

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.

Badges

We can add badges into our app with Angular Material.

To add it, we 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 { MatBadgeModule } from '@angular/material/badge';

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

app.component.html

<div>
  <span matBadge="4" matBadgeOverlap="false">Text with a badge</span>
</div>

We add the matBadge and matBadgeOverlap properties to add a badge.

Also, we can make it raised:

app.component.html

<div>
  <span mat-raised matBadge="4" matBadgeOverlap="false">Text with a badge</span>
</div>

Bottom Sheet

A bottom sheet adds a panel to the bottom of the screen.

For example, we can use it by writing:

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 { MatBottomSheetModule } from '@angular/material/bottom-sheet';

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

app.component.ts

import { Component } from '@angular/core';
import { MatBottomSheet, MatBottomSheetRef } from '@angular/material/bottom-sheet';

@Component({
  selector: 'bottom-sheet-overview-example-sheet',
  template: 'bottom sheet',
})
export class BottomSheetOverviewExampleSheet {
  constructor(private _bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>) {}

  openLink(event: MouseEvent): void {
    this._bottomSheetRef.dismiss();
    event.preventDefault();
  }
}

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

  openBottomSheet(): void {
    this._bottomSheet.open(BottomSheetOverviewExampleSheet);
  }
}

app.component.html

<div>
  <button mat-raised-button (click)="openBottomSheet()">Open file</button>
</div>

We added a button to that calls the openBottomSheet method to open the bottom sheet.

In app.component.ts , we added a BottomSheetOverviewExampleSheet component to show the sheet.

We have the openBottomSheet method to show the sheet.

We inject the _bottomSheet service so that we can open the bottom sheet.

Button

We can add buttons with the MatButtonModule .

For instance, 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 { MatButtonModule } from '@angular/material/button';

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

app.component.html

<div>
  <button mat-button color="primary">Primary</button>
  <button mat-raised-button color="primary">Primary</button>
</div>

We add the mat-button and mat-raised-button directives to add Material design buttons.

Conclusion

We can add badges, bottom sheets, and buttons with Angular Material easily.

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.

Getting Started

We can install Angular Material into an existing project by running:

ng add @angular/material

Then we run:

ng serve

to serve our app.

Autocomplete

Angular comes with an autocomplete component.

To use it, we 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 { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

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

app.component.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myControl = new FormControl();
  options = [
    { name: 'apple' },
    { name: 'orange' },
    { name: 'grape' }
  ];
  filteredOptions: Observable<any[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl && this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => typeof value === 'string' ? value : value.name),
        map(name => name ? this._filter(name) : this.options.slice())
      );
  }

  displayFn(user): string {
    return user && user.name ? user.name : '';
  }

  private _filter(name: string) {
   const filterValue = name.toLowerCase();

   return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
  }
}

app.component.html

<div>
  <form class="example-form">
    <mat-form-field class="example-full-width">
      <mat-label>Assignee</mat-label>
      <input type="text" matInput [formControl]="myControl"
        [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
        <mat-option *ngFor="let option of filteredOptions | async"
          [value]="option">
          {{option.name}}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
  </form>
</div>

We add the input and the mat-autocomplete component into the mat-form-field to show the input and the autocomplete.

In app.component.ts , we watch the value of myControl and then do the filtering with the map operator and the filter method.

The displayFn method is bused to display the values for the autocomplete.

We also have to import all the required modules in app.module.ts .

We can also add a custom input into the mat-form-field component.

Also, we defined a FormControl and set it to the input to let us watch the input value.

For instance, we write:

app.component.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

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

ngOnInit() {
    this.filteredFruits = this.control.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }

  private _filter(value: string): string[] {
    const filterValue = this._normalizeValue(value);
    return this.fruits.filter(street => this._normalizeValue(street).includes(filterValue));
  }

  private _normalizeValue(value: string): string {
    return value.toLowerCase().replace(/s/g, '');
  }
}

app.component.html

<div>
  <form class="example-form">
    <input type="text" placeholder="Search a fruit" [formControl]="control"
      [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let street of filteredFruits | async"
        [value]="street">
        {{street}}
      </mat-option>
    </mat-autocomplete>
  </form>
</div>

We added our own input into the form instead of a mat-form-field .

Conclusion

We can add an autocomplete with Angular Material.