By now, you will have a strong gut feeling that when we want to install anything in Angular applications, we have a powerful command-line interface (CLI) tool. We will continue to use the same CLI, and with the help of npm, we will install Angular Material. 

Angular Material has a core dependency and prerequisite to install two packages—CDK and Animations. So, let's install these first, and then we will install Angular Material:

npm i @angular/cdk --save

npm i @angular/animations --save

npm i @angular/material --save

After successfully running the preceding commands, we should see the output shown in the following screenshot:

Open the package.json file; we should see the packages that have been installed, and the corresponding version numbers listed alongside them. If you see the three packages that we have recently installed, it means we are ready to start creating some awesome UI screens using Angular Material.

Once we have installed Angular Material, we will need to import all the required modules into our app.module.ts file. There are a lot of modules provided by Material, each for a specific purpose. For example, we will need to import MatCardModule if we plan to use Material cards. Similarly, we need to import MatChipsModule if we want to use Material chips in our application. While we can definitely import only the required modules into AppModule, in most applications using Material UI, we will need all the modules. Now, let's quickly learn how to import all the modules in one go. We can import all the modules into a generic module, and then use the newly created generic module in the app.module.ts file. First, let's create a file in our project structure and name it material-module.ts, then we can add the following code to in order import all the modules into this file:

import {A11yModule} from '@angular/cdk/a11y';
import {DragDropModule} from '@angular/cdk/drag-drop';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {CdkStepperModule} from '@angular/cdk/stepper';
import {CdkTableModule} from '@angular/cdk/table';
import {CdkTreeModule} from '@angular/cdk/tree';
import {NgModule} from '@angular/core';
import {
 MatAutocompleteModule,
 MatBadgeModule,
 MatBottomSheetModule,
 MatButtonModule,
 MatButtonToggleModule,
 MatCardModule,
 MatCheckboxModule,
 MatChipsModule,
 MatDatepickerModule,
 MatDialogModule,
 MatDividerModule,
 MatExpansionModule,
 MatGridListModule,
 MatIconModule,
 MatInputModule,
 MatListModule,
 MatMenuModule,
 MatNativeDateModule,
 MatPaginatorModule,
 MatProgressBarModule,
 MatProgressSpinnerModule,
 MatRadioModule,
 MatRippleModule,
 MatSelectModule,
 MatSidenavModule,
 MatSliderModule,
 MatSlideToggleModule,
 MatSnackBarModule,
 MatSortModule,
 MatStepperModule,
 MatTableModule,
 MatTabsModule,
 MatToolbarModule,
 MatTooltipModule,
 MatTreeModule,
} from '@angular/material';

@NgModule({
 exports: [
 A11yModule,
 CdkStepperModule,
 CdkTableModule,
 CdkTreeModule,
 DragDropModule,
 MatAutocompleteModule,
 MatBadgeModule,
 MatBottomSheetModule,
 MatButtonModule,
 MatButtonToggleModule,
 MatCardModule,
 MatCheckboxModule,
 MatChipsModule,
 MatStepperModule,
 MatDatepickerModule,
 MatDialogModule,
 MatDividerModule,
 MatExpansionModule,
 MatGridListModule, 
 MatIconModule,
 MatInputModule,
 MatListModule,
 MatMenuModule,
 MatNativeDateModule,
 MatPaginatorModule,
 MatProgressBarModule,
 MatProgressSpinnerModule,
 MatRadioModule,
 MatRippleModule,
 MatSelectModule,
 MatSidenavModule,
 MatSliderModule,
 MatSlideToggleModule,
 MatSnackBarModule,
 MatSortModule,
 MatTableModule,
 MatTabsModule,
 MatToolbarModule,
 MatTooltipModule,
 MatTreeModule,
 ScrollingModule,
] 
})
export class MaterialModule {}

In the preceding code, we imported all the required modules into the file. Don't worry about categorizing the previously listed modules just yet. We learn about the modules when we learn about the components that are provided by Material. The next step is pretty obvious—we will need to import this newly created module into our app.module.ts file:

import {MaterialModule} from './material-module';

Once we have imported the module, don't forget to add it to the imports of AppModule. That's it. We are all set to start learning and implementing the components that are provided by Angular Material.

Let's jump right into learning about the components of Angular Material.