How To Install Angular Material In Angular

In this first tutorial of the Angular Material Reactive Form Tutorial Series, you’ll learn how to get started with creating an Angular project and installing Angular material. You’ll see how to add Angular material to the Angular project and render an Angular Material component. So, let’s get started.

If you prefer a video instead, feel free to visit our Angular Material Reactive Form Tutorial Series on YouTube.

https://youtu.be/yWRaFEig5x4

Creating Angular Project

Once you have installed the Angular CLI, using the CLI command create a new Angular project.

ng new reactive

The above command will create an Angular project. Navigate to the project directory and run the application.

npm start

Once the application is up and running, you will be able to view the application running at http://localhost:4200.

Adding Angular Material To Angular

For adding Angular material design components to Angular project, from the command line execute the following command:

ng add @angular/material

The above command will prompt for a couple of things,

• Theme selection - Select any one of the themes
• Whether to enable Browser Animations - Select yes
• Enable global styles - Select yes

With the above things done right, Angular material will be added to your project.

Let’s try adding an Angular material Slider component to see if Angular material is working or not.

Add the Slider module to app.module.ts file. Import it and add it to the imports array. Here is how the modified app.module.ts file looks:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSliderModule } from '@angular/material/slider';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatSliderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Remove the existing HTML from app.component.html and add the slider component code:

Save the changes and restart the application. You will be able to see the Angular Material Slider component in the browser.

Wrapping It Up

In this first tutorial of the Angular Material Reactive Form Tutorial series, you learnt how to create an Angular project, install Angular material and use Material components in the project.

In the next part, you’ll learn how to create an Angular Material Reactive Form.