Steps to Implement Angular Material
Step 1: Install the Angular Cli in your system
npm install -g @angular/cli
Step 2: Create an Angular Application using the following command.
ng new angular-material
cd angular-material
Step 3: Add the Angular Material in the project using the following command.
ng add @angular/material
Folder Structure:
Dependencies list in package.json file.
"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/cdk": "^17.3.5",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/material": "^17.3.5",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/router": "^17.3.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
}
Example: The below code demonstrates a basic example of Angular Material and display different checkbox used.
<!-- App.component.html -->
<h1 class="title">w3wiki</h1>
<h3>checkbox:</h3>
<mat-checkbox layout-align="center center">
i'm a normal checkbox
</mat-checkbox>
<h3>Indeterminate check box:</h3>
<mat-checkbox indeterminate="true">
i'm an Indeterminate checkbox
</mat-checkbox>
<h3>disabled checkbox:</h3>
<mat-checkbox disabled> i'm a disabled checkbox </mat-checkbox>
<h3>Check box with different themes:</h3>
<mat-checkbox color="primary"> primary theme</mat-checkbox>
<br />
<mat-checkbox color="accent"> accent theme</mat-checkbox>
<br />
<mat-checkbox color="warn"> warn theme</mat-checkbox>
<br />
/* app.component.css */
.title {
color: green;
display: flex;
justify-content: center;
align-items: center;
}
//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { BrowserAnimationsModule } from
'@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
BrowserAnimationsModule,
MatCheckboxModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule { }
To start the application run the following command.
ng serve
Output:
What is Angular Material?
User Experience is one of the most important things in web development. Angular Material emerges as a powerful tool for developers, offering numerous UI components designed to elevate your Angular applications to new heights of elegance and functionality. In this article, we’ll learn more about Angular Material and its uses.
Prerequisites
Table of Content
- What is Angular Material?
- Features of Angular Material
- Uses of Angular Material
- Steps to Implement Angular Material
Contact Us