Installation

Install Angular Material

Use the Angular CLI's installation schematic to set up your Angular Material project by running the following command:

ng add @angular/material

For detailed installation instructions, please refer to the following link: Angular Material Installation Guide.

The ng add command will install Angular Material, the Component Dev Kit(CDK), Angular Animations and it will ask you the following questions to determine which features to include:

1. Choose a prebuilt theme name, or "custom" for a custom theme. These are the list of prebuilt themes.

Theme	Light or dark	Palettes (primary,accent,warn)
deeppurple-amber.css	Light	deep-purple, amber, red
indigo-pink.css	Light	indigo, pink, red
pink-bluegrey.css	Dark	pink, blue-grey, red
purple-green.css	Dark	purple, green, red

Once you've included these files, the CSS for every component in the library will be available, and the selected theme CSS file will be automatically included in your angular.json configuration.

"styles": [
    "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
]

If you are creating your custom theme, you can manually remove the prebuilt theme CSS file (e.g., indigo-pink.css) from the angular.json file.

You're done! Angular Material is now configured to be used in your application.

Browser Animations

Set up browser animations for Angular Material:

Importing the BrowserAnimationsModule into your application in the app.module.ts file activates Angular's animation system.

Neglecting this import will lead to the disabling of the majority of Angular Material's animations.

Failure to include this import will result in the deactivation of most of Angular Material's animations.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Include the imported BrowserAnimationsModule in the imports array within the @NgModule decorator of your app.module.ts file.

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserAnimationsModule,
        CoreModule,
        CommonModule,
    ],
    bootstrap: [AppComponent],
    providers: [
        CacheService,
        ChatLibService,
    ],
})

For further details, please visit the following link:

https://zerotomastery.io/blog/angular-animations-and-examples/

Import Modules

We've created a file named "material.module.ts" in which we've globally imported all Angular Material modules.

import {NgModule} from '@angular/core';
import {A11yModule} from '@angular/cdk/a11y';
import {CdkAccordionModule} from '@angular/cdk/accordion';
import {ClipboardModule} from '@angular/cdk/clipboard';
import {DragDropModule} from '@angular/cdk/drag-drop';
import {PortalModule} from '@angular/cdk/portal';
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 {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatBadgeModule} from '@angular/material/badge';
import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
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 {MatDialogModule} from '@angular/material/dialog';
import {MatDividerModule} from '@angular/material/divider';
import {MatExpansionModule} from '@angular/material/expansion';
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 {MatNativeDateModule, MatRippleModule} from '@angular/material/core';
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 {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';
import {OverlayModule} from '@angular/cdk/overlay';
import {BidiModule} from '@angular/cdk/bidi';

Add the Angular Material modules you imported to the imports array inside the @NgModule decorator within the "material.module.ts" file.

@NgModule({
  exports: [
    A11yModule,
    CdkAccordionModule,
    ClipboardModule,
    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,
    OverlayModule,
    PortalModule,
    ScrollingModule,
    BidiModule
  ]
})

We imported the previously created "material.module.ts" file into the "shared.module.ts" file.

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

In the "shared.module.ts" file, include the imported "MaterialModule" in both the imports and exports arrays within the @NgModule decorator.