Angular 15 + Angular Material Hello World Example - Getting started with Angular Material
Overview
In this tutorial we will be developing Angular 15 application and making use of Angular Material Components. We will learn how to setup Angular Material for Angular application.Technology Stack
We will be making use of-- Angular 15
- Angular Material
Implementation
For this tutorial series we make use of Visual Studio CodeThe Angular project we will be developing is as follows-
Develop Angular Application
- Install NodeJS. Go to NodeJS downloads page and download installer. Start the installer and install nodejs.
-
Install angular cli using the command-
npm install -g @angular/cli
-
Create new Angular Project named library-management
ng new library-management --skip-git
-
Go inside the created the created angular project and start Angular Project-
ng serve
-
If we now go to - localhost:4200 Angular home page
Use Angular Material Components
-
Install Angular Material
ng add @angular/material
The ng add command will install Angular Material, the Component Dev Kit (CDK), Angular Animations. Also when installing Angular Material, it will ask for selecting a pre built theme. Select any one theme.
ng generate component helloworld
In the app-routing.module.ts add the route as hello for our new HelloworldComponent
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HelloworldComponent } from './helloworld/helloworld.component'; const routes: Routes = [ { path: 'hello', component: HelloworldComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }Also in the app.component.html keep only the below code and remove the remaining-
<router-outlet></router-outlet>Start the application using-
ng serve
If we now go to localhost:4200/hello we see the following-
Adding the Angular Material Component in Angular Application
For adding any Angular Material Component in Angular we will be following below steps--
Add the Angular Material Button module to the 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 { HelloworldComponent } from './helloworld/helloworld.component'; import { MatButtonModule } from '@angular/material/button'; @NgModule({ declarations: [ AppComponent, HelloworldComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatButtonModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
- For this example we do not need any backing data
-
Use the Button tag in the helloworld.component.html file
<div class="example-button-row"> <button mat-raised-button>Basic</button> <button mat-raised-button color="primary">Primary</button> <button mat-raised-button color="accent">Accent</button> <button mat-raised-button color="warn">Warn</button> <button mat-raised-button disabled>Disabled</button> <a mat-raised-button href="https://www.codeusingjava.com/" target="_blank">Link</a> </div>
-
If we now go to - localhost:4200/hello we see the following-