Angular Material: Getting Started

(updated for Angular 9 on 25th July 2020)

Whenever I want to create a new Angular Project I have to Google that, how to create an angular project and how to integrate Angular Material in it? So I am creating this story for my reference :)

So the overall procedure is :

1. Install Node
2. Install CLI
3. Create New Angular Project
4. Add Angular Material in that project
5. Import all required modules in app.module.ts file
6. For future use, use that template :)

1. Node Installation

go to https://nodejs.org/en/download/

and download and install node as per your device.

Check node version :

Command:

node --version

2. Install CLI

now open Command Prompt or Terminal

hit command:

npm install -g @angular/cli

After completion check CLI version by using: ng -- version

3. Create New Angular Project

For creating a new Angular Project go to any location in Terminal or CMD where you want to create a new project.

hit command:

ng new my-first-app

now after completion of this command

go to the project directory:

cd my-first-app

run that project: ng serve

now open a browser and go to “http://localhost:4200/” we can see our angular application is running. Yep!

4. Add Angular Material in project

For adding Angular Material hit this command:

ng add @angular/material

Now open app.module.ts file and add this code in it.

// default code
import { MatDialogModule } from "@angular/material/dialog";
import { MAT_LABEL_GLOBAL_OPTIONS, MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
import { MatIconRegistry } from '@angular/material/icon';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
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 { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
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 { 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 { MatRippleModule } from '@angular/material/core';
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';
//...
@NgModule({
imports: [
MatBadgeModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule,
MatFormFieldModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatToolbarModule,
MatTooltipModule,
MatDatepickerModule,
MatNativeDateModule,
HttpClientModule,
MatRadioModule,
//    ...
  ],
  declarations: [],
  providers: [],
bootstrap: [AppComponent],
entryComponents: []
})
export class AppModule { }

Our basic template for Angular Material is now ready to use.

Upload this project on Github or any source control. And use this as a starter project for next time use :)