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
- Choose a prebuilt theme name, or “custom” for a custom theme:
- Set up global Angular Material typography styles
- Set up browser animations for Angular Material
- 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
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