Install Angular Material
Use the Angular CLI's installation schematic to set up your Angular Material project by running the following command:
Copy 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:
Choose a prebuilt theme name, or "custom" for a custom theme. These are the list of prebuilt themes.
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.
Copy "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.
Copy 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.
Copy @ 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.
Copy 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.
Copy @ 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.
Copy 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.
Last updated 9 months ago