Angular 10 + Angular Material Hello World Example - Getting started with Angular Material | CodeUsingJava








Angular 10 + Angular Material Hello World Example - Getting started with Angular Material


Overview

In this tutorial we will be developing Angular 10 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 10
  • Angular Material

Implementation

For this tutorial series we make use of Visual Studio Code
The Angular project we will be developing is as follows-
Angular Material Project

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
    

    Install Angular CLI
  • Create new Angular Project named library-management
    ng new library-management --skip-git
    

    New Angular CLI
  • Go inside the created the created angular project and start Angular Project-
    ng serve
    

    Start Angular CLI
  • If we now go to - localhost:4200 Angular home page

    Angular Home Page

Use Angular Material Components

  • Install Angular Material
    ng add @angular/material
    

    Angular Material Install
    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.
Create a new Component named Helloworld as follows-
ng generate component helloworld

Angular Material Component
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

PrimeNG serve
If we now go to localhost:4200/hello we see the following-
PrimeNG Hello World

Adding the Angular Material Component in Angular Application

For adding any Angular Material Component in Angular we will be following below steps-
Add PrimeNG Component
  • 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-
    Add PrimeNG
In the next tutorials of this series we will be further exploring other components provided by Angular Material.

Downloads-

Angular Material Hello World Example