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.

Sidenav

Angular comes with a sidenav component.

We can add 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 { MatSidenavModule } from '@angular/material/sidenav';
import { MatButtonModule } from '@angular/material/button';

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

app.module.html

<div>
  <mat-drawer-container class="example-container" autosize>
    <mat-drawer #drawer class="example-sidenav" mode="side">
      <p>Auto-resizing sidenav</p>
      <p *ngIf="showFiller">Lorem, ipsum dolor sit amet consectetur.</p>
      <button (click)="showFiller = !showFiller" mat-raised-button>
        Toggle extra text
      </button>
    </mat-drawer>

    <div class="example-sidenav-content">
      <button type="button" mat-button (click)="drawer.toggle()">
        Toggle sidenav
      </button>
    </div>
  </mat-drawer-container>
</div>

app.component.ts

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

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

styles.css

.example-container {
  height: 100vh;
}

We add the sidenav with the mat-drawer-container as its container.

mat-drawer is the sidenav drawer.

The Toggle sidenav button shows the drawer.

The Toggle extra text button closes the drawer.

The filler text display is controlled by showFiller .

drawer.toggle() lets us toggle the drawer.

Slide Toggles

We can add a toggle with the mat-slide-toggle 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 { MatSlideToggleModule } from '@angular/material/slide-toggle';

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

app.component.html

<div>
  <mat-slide-toggle color="red" [checked]="true" [disabled]="false">
    Slide me!
  </mat-slide-toggle>
</div>

We add the MatSlideToggleModule into our module so that we can add the mat-slide-toggle component into the template.

checked sets the checked state.

disabled makes it disabled if it’s true .

color sets the color.

Slider

We can add a slider with the mat-slider 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 { MatSliderModule } from '@angular/material/slider';
import { MatCardModule } from '@angular/material/card';

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

app.component.html

<div>
  <mat-card class="example-result-card">
    <mat-card-content>
      <mat-slider min="1" max="5" step="0.5" value="1.5"></mat-slider>
    </mat-card-content>
  </mat-card>
</div>

Adding the MatSliderModule lets us add the mat-slider to our template.

min has the minimum allowed value.

max has the maximum allowed value.

step has the interval we can set.

value is the value of the slider.

Conclusion

We can add sidenavs, slide toggles, and sliders 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.

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.

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.

Paginator

The paginator component lets us add a form control to control the pagination settings.

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

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

app.component.html

<div>
  <mat-paginator [length]="100" [pageSize]="10"
    [pageSizeOptions]="[5, 10, 25, 100]">
  </mat-paginator>
</div>

We add the mat-paginator component to add a pagination control.

length is the total number of entries.

pageSize is the size of the page.

pageSizeOptions is an array of page sizes we can set.

Progress Bar

We can add a progress bar with the mat-progress-bar 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 { MatProgressBarModule } from '@angular/material/progress-bar';

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

app.component.html

<div>
  <mat-progress-bar mode="buffer"></mat-progress-bar>
</div>

We add the MatProgressBarModule to add a progress bar.

The mat-progress-bar adds the progress bar.

The mode attribute sets the appearance of the progress bar.

We can also make it determinate:

<div>
  <mat-progress-bar mode="determinate" value="40"></mat-progress-bar>
</div>

or indeterminate:

<div>
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>

Progress Spinner

The mat-progress-spinner lets us add a progress spinner to our app.

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 { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

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

app.component.ts

import { Component } from '@angular/core';
import { ThemePalette } from '@angular/_material_/core';
import { ProgressSpinnerMode } from '@angular/material/progress-spinner';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  color: ThemePalette = 'primary';
  mode: ProgressSpinnerMode = 'indeterminate';
  value = 50;
}

app.component.html

<div>
  <mat-progress-spinner class="example-margin" [color]="color" [mode]="mode"
    [value]="value">
  </mat-progress-spinner>
</div>

We add the MatProgressSpinnerModule to let us add the progress spinner.

Then in app.component.ts , we add the color , mode and value variables to set the color, spinner mode, and the progress value respectively.

In the template, we add the mat-progress-spinner component to set those variables to the attributes.

The value is used when the progress spinner has mode set to 'determinate' .

Conclusion

We can add the paginator, progress bar, and progress spinner 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.

Inputs

We can add inputs with the MatInputModule .

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 { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';

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

app.component.html

<div>
  <form class="example-form">
    <mat-form-field>
      <mat-label>Favorite food</mat-label>
      <input matInput placeholder="Ex. Pizza" value="Sushi">
    </mat-form-field>

    <mat-form-field>
      <mat-label>Leave a comment</mat-label>
      <textarea matInput placeholder="Comment"></textarea>
    </mat-form-field>
  </form>
</div>

We import the MatFormFieldModule and the MatInputModule so we can use the mat-form-fiels and matInput directive.

mat-label has the form label.

List

We can add lists to our Angular app with the MatListModule .

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

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

app.component.html

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

to add the list with the MatListModule .

The mat-list has the list.

mat-list-item has list items.

Menu

We can add a menu with the mat-menu 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 { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';

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

app.component.html

<div>
  <button mat-button [matMenuTriggerFor]="menu">Menu</button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </mat-menu>
</div>

We add the MatButtonMoule for the button trigger the menu.

The MatMenuModule lets us add the menu.

In the template, we have the button with the matMenuTriggerForm which has the value set to the menu name.

mat-menu has the menu. The # defines the name with the menu.

Conclusion

We can add inputs, lists and menus 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.

Form Fields

We can add form fields with the MatFormFieldModule .

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 { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';

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

app.componen.html

<div>
  <mat-form-field appearance="standard">
    <mat-label>Standard form field</mat-label>
    <input matInput placeholder="Placeholder">
    <mat-icon matSuffix>home</mat-icon>
    <mat-hint>Hint</mat-hint>
  </mat-form-field>
</div>

We imported the MatFormFieldModule , MatInputModule , and MatIconModule to add the form field with the input and icon.

mat-icon has the icon. matSuffix makes it show to the right of the input.

The appearance attribute sets the appearance type.

Grid List

We can add a grid list with the mat-grid-list 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 { MatGridListModule } from '@angular/material/grid-list';

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

app.component.ts

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

interface Tile {
  text: string,
  cols: number,
  rows: number,
  color: string
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tiles: Tile[] = [
    { text: 'One', cols: 3, rows: 1, color: 'lightblue' },
    { text: 'Two', cols: 1, rows: 2, color: 'lightgreen' },
    { text: 'Three', cols: 1, rows: 1, color: 'lightpink' },
    { text: 'Four', cols: 2, rows: 1, color: 'lightyellow' },
  ];
}

app.component.html

<div>
  <mat-grid-list cols="4" rowHeight="100px">
    <mat-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols"
      [rowspan]="tile.rows" [style.background]="tile.color">
      {{tile.text}}
    </mat-grid-tile>
  </mat-grid-list>
</div>

We add a grid with the with the mat-grid-list component.

Inside it, we add the mat-grid-tile with the tiles.

We set the colspan to set the column span.

rowspan sets the number of rows spanned.

style.background sets the background.

Icon

We can add icons with the mat-icon 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 { MatIconModule } from '@angular/material/icon';

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

app.component.html

<div>
  <mat-icon>home</mat-icon>
</div>

We import the MatIconModule and add the mat-icon component to the template.

Conclusion

We can add form fields, grid lists, and icons with Angular Material.