Angular 8 - Angular Material

Angular Material provides a huge collection of high-quapty and ready-made Angular component based on Material design. Let us learn how to include Angular material in Angular apppcation and use its component.

Configure Angular Material

Let us see how to configure Angular Material in Angular apppcation.

Open command prompt and go to project root folder.

cd /go/to/expense-manager

Add Angular material package using below command −

ng add @angular/material

Angular CLI will ask certain question regarding theme, gesture recognition and browser animations. Select your any theme of your choice and then answer positively for gesture recognition and browser animation.

Instalpng packages for toopng via npm.
Installed packages for toopng via npm.
Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://material.angular.i
o?theme=indigo-pink ]
Set up HammerJS for gesture recognition? Yes
Set up browser animations for Angular Material? Yes

Angular material packages each UI component in a separate module. Import all the necessary module into the apppcation through root module (src/app/app.module.ts)

import { MatTableModule } from  @angular/material/table ;
import { MatButtonModule } from  @angular/material/button ;
import { MatIconModule } from  @angular/material/icon ;

@NgModule({
  imports: [
    MatTableModule,
    MatButtonModule,
    MatIconModule
  ]
})

Change the edit button using ExpenseEntryListComponent template (src/app/expense-entry-pst/expense-entry-pst.component.html) as specified below −

<span class="col-sm" style="text-apgn: right;">
    <!-- <button type="button" class="btn btn-primary">Edit</button> -->
    <button mat-raised-button color="primary">Edit</button> 
</span>

Run the apppcation and test the page.

ng serve

The output of the apppcation is as follows −

Here, the apppcation clearly shows the Angular Material button.

Working example

Some of the important UI elements provided by Angular Material package.

Form field

Input

Checkbox

Radio button

Select

Button

DatePicker

List

Card

Grid pst

Table

Paginator

Tabs

Toolbar

Menu

Dialog

Snackbar

Progress bar

Icon

Divider

Using material component is quite easy and we will learn one of the frequently used material component, Material Table by working on a sample project.

Open command prompt and go to project root folder.

ng add @angular/material

Let us change our ExpenseEntryListComponent(src/app/expense-entry-pst/expense-entry-pst.component.ts) and use Material Table component.

Declare a variable, displayedColumns and assign the pst of column to be displayed.

displayedColumns: string[] = [ item ,  amount ,  category ,  location ,  spendOn  ];

Add material table as specified below in the ExpenseEntryListComponent template (src/app/expense-entry-pst/expense-entry-pst.component.html) and remove our existing pst.

<span class="mat-elevation-z8">
   <table mat-table [dataSource]="expenseEntries"> 
      <ng-container matColumnDef="item">
         <th mat-header-cell *matHeaderCellDef> Item </th>
         <td mat-cell *matCellDef="let element" style="text-apgn: left"> {{element.item}} </td>
      </ng-container>

      <ng-container matColumnDef="amount">
         <th mat-header-cell *matHeaderCellDef > Amount </th>
         <td mat-cell *matCellDef="let element" style="text-apgn: left"> {{element.amount}} </td>
      </ng-container>

      <ng-container matColumnDef="category">
         <th mat-header-cell *matHeaderCellDef> Category </th>
         <td mat-cell *matCellDef="let element" style="text-apgn: left"> {{element.category}} </td>
      </ng-container>

      <ng-container matColumnDef="location">
         <th mat-header-cell *matHeaderCellDef> Location </th>
         <td mat-cell *matCellDef="let element" style="text-apgn:left"> {{element.location}} </td>
      </ng-container>

      <ng-container matColumnDef="spendOn">
         <th mat-header-cell *matHeaderCellDef> Spend On </th>
         <td mat-cell *matCellDef="let element" style="text-apgn: left"> {{element.spendOn}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
</span>

Here,

mat-table property is used to convert the normal table in to material table.

[dataSource] property is used to specify the data source of the table.

Material table is template based and each column can be designed using separate template. ng-container is used to create template.

matColumnDef is used to specify the column of the data source appped to the particular ng-container.

mat-header-cell is used to specify the header text for each column.

mat-cell is used to specify the content of each column.

mat-header-row and mat-row is used to specify the order of the column in row.

We have used only the basic features of the Material table. Material table has many more features such as sorting, pagination, etc.

Run the apppcation.

ng serve

The output of the apppcation is as follows −