Integrate material UI in Angular 12 in 4 easy steps

Hello guys, in the previous tutorial we have developed an Angular 12 application so we are using that repository to integrate MUI.

Create Angular app in 5 easy steps with Github repository

After setting up the basic angular project we are moving to integrate material UI

Install Angular Material

1. Choose a prebuilt theme name, or “custom” for a custom theme:
2. Set up global Angular Material typography styles
3. Set up browser animations for Angular Material
4. Display a component

For installing material UI execute the below command

ng add @angular/material

press Y for allow execution ahead

THEME: Choose the relevant theme you would like to add to your solution

Whether to apply the global typography styles to your application.

Choose Y to allow typography for better UI

Importing the BrowserAnimationsModule into your application enables Angular's animation system. Declining this will disable most of Angular Material's animations.

prompt asking for browser animation execution [choose based on your convenience]

Here is your project setup successfully for material UI

This component has its own module, so we need to register that module inside the material.module.ts file as we have below:

Create module form command prompt

ng g m materials

Add below code in materials.module.ts file

Code of materials.module.ts

import { NgModule } from ‘@angular/core’;
import { A11yModule } from ‘@angular/cdk/a11y’;
import { ClipboardModule } from ‘@angular/cdk/clipboard’;
import { DragDropModule } from ‘@angular/cdk/drag-drop’;
import { PortalModule } from ‘@angular/cdk/portal’;
import { ScrollingModule } from ‘@angular/cdk/scrolling’;
import { CdkStepperModule } from ‘@angular/cdk/stepper’;
import { CdkTableModule } from ‘@angular/cdk/table’;
import { CdkTreeModule } from ‘@angular/cdk/tree’;
import { MatAutocompleteModule } from ‘@angular/material/autocomplete’;
import { MatBadgeModule } from ‘@angular/material/badge’;
import { MatBottomSheetModule } from ‘@angular/material/bottom-sheet’;
import { MatButtonModule } from ‘@angular/material/button’;
import { MatButtonToggleModule } from ‘@angular/material/button-toggle’;
import { MatCardModule } from ‘@angular/material/card’;
import { MatCheckboxModule } from ‘@angular/material/checkbox’;
import { MatChipsModule } from ‘@angular/material/chips’;
import { MatStepperModule } from ‘@angular/material/stepper’;
import { MatDatepickerModule } from ‘@angular/material/datepicker’;
import { MatDialogModule } from ‘@angular/material/dialog’;
import { MatDividerModule } from ‘@angular/material/divider’;
import { MatExpansionModule } from ‘@angular/material/expansion’;
import { MatGridListModule } from ‘@angular/material/grid-list’;
import { MatIconModule } from ‘@angular/material/icon’;
import { MatInputModule } from ‘@angular/material/input’;
import { MatListModule } from ‘@angular/material/list’;
import { MatMenuModule } from ‘@angular/material/menu’;
import { MatNativeDateModule, MatRippleModule } from @angular/material/core’;
import { MatPaginatorModule } from ‘@angular/material/paginator’;
import { MatProgressBarModule } from ‘@angular/material/progress-bar’;
import { MatProgressSpinnerModule } from ‘@angular/material/progress-spinner’;
import { MatRadioModule } from ‘@angular/material/radio’;
import { MatSelectModule } from ‘@angular/material/select’;
import { MatSidenavModule } from ‘@angular/material/sidenav’;
import { MatSliderModule } from ‘@angular/material/slider’;
import { MatSlideToggleModule } from ‘@angular/material/slide-toggle’;
import { MatSnackBarModule } from ‘@angular/material/snack-bar’;
import { MatSortModule } from ‘@angular/material/sort’;
import { MatTableModule } from ‘@angular/material/table’;
import { MatTabsModule } from ‘@angular/material/tabs’;
import { MatToolbarModule } from ‘@angular/material/toolbar’;
import { MatTooltipModule } from ‘@angular/material/tooltip’;
import { MatTreeModule } from ‘@angular/material/tree’;
import { OverlayModule } from ‘@angular/cdk/overlay’;

@NgModule({

exports: [A11yModule,ClipboardModule,CdkStepperModule,CdkTableModule,CdkTreeModule,DragDropModule,MatAutocompleteModule,MatBadgeModule,
MatBottomSheetModule,MatButtonModule,MatButtonToggleModule,MatCardModule,MatCheckboxModule,MatChipsModule,MatStepperModule,MatDatepickerModule,MatDialogModule,MatDividerModule,MatExpansionModule,MatGridListModule,MatIconModule,MatInputModule,MatListModule,MatMenuModule,MatNativeDateModule,MatPaginatorModule,MatProgressBarModule,MatProgressSpinnerModule,MatRadioModule,MatRippleModule,MatSelectModule,MatSidenavModule,MatSliderModule,MatSlideToggleModule,MatSnackBarModule,MatSortModule,MatTableModule,MatTabsModule,MatToolbarModule,MatTooltipModule,MatTreeModule,OverlayModule,PortalModule,ScrollingModule,]

})

export class MaterialsModule { }

/** Copyright 2021 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at http://angular.io/license */

Basic example of materials.module

materials.module.ts

Add below code in app.component.html

<div layout=”row” style=”text-align: center;” layout-align=”center center”>
<router-outlet></router-outlet>
</div>

Add below code in dashboard.component.html

<h2>HELLO, I’M DASHBOARD<br />YOU ARE WATCHING ANGULAR MATERIAL COMPONENTS</h2>
<section>
<div class=”example-label”>Basic</div>
<div class=”example-button-row”>
<button mat-button>Basic</button>
<button mat-button color=”primary”>Primary</button>
<button mat-button color=”accent”>Accent</button>
<button mat-button color=”warn”>Warn</button>
<button mat-button disabled>Disabled</button>
<a mat-button href=”https://www.google.com/" target=”_blank”>Link</a></div>
</section>

Boommmm, here is the output

Refer to our new blog on Add navigation panel using material UI in Angular 12 in 5 easy steps