Install Angular Material

Español | English

The installation of Angular Material (opens new window) is fully guided throuth Angular CLI, so when we run the command ng add @angular/material in our application, we will be able to install everithing that is needed.

One of the most important parts of the installation is when we are asked about the theme we want to use in our application. For that, the installer gives us the option to select one of the predefined themes (Indigo/Pink, Deep Purple/Amber, Pink/Blue Grey or Purple/Green) or our own custom theme.

If you're interested in learning how to create a custom theme, I recommend cheking out this other article on how to create a theme for Angular Material.

In addition to the theme, we will also be asked if we want to apply Angular Material typography to the entire application and if we need to enable animations for Angular Material.

Once the instalation is complete, the following changes will have been made to our project:

• All the necessary dependencies will have been added to the package.json file.
• If a predefined theme was selected, the angular.json file will be modified to include the corresponding style sheet (e.g., "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css") in the styles lists under the architect.build.options.styles and architect.test.options.styles sections.
• If a custom theme was selected, the styles.scss file will be modified to include an example custom theme based on the Indigo/Pink theme. This allows us to make the necessary changes for our theme.
• Basic styles for the html and body elements will be added to the styles.scss file.
• The necessary references to Google fonts will be added to the index.html file.
• If applying Angular Material typography to the entire application was selected, the mat-typography class will be added to the body element in the index.html file.
• If enabling Angular Material animations was selected, the BrowserAnimationsModule module will be added to the imports in the app.module.ts file. Otherwise, the NoopAnimationsModule module will be added.

Once we have everything set up, we can start using Angular Material by importing the modules of the components we want to include in our application:

import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatSliderModule } from '@angular/material/slider';
…
const materialModules = [
  MatButtonModule,
  MatCardModule,
  MatDatepickerModule,
  MatNativeDateModule,
  MatSliderModule
];

@NgModule ({....
  imports: [...,
  ...materialModules
  ]
})

app.module.ts (or any other module)

And thus, we can start integrating them into our components:

<mat-slider min="1" max="100" step="1" value="1"></mat-slider>

<button mat-button>Botón</button>

<mat-card>
  <mat-calendar></mat-calendar>
</mat-card>

app.component.html

---