# Installation ### Install Angular Material Use the Angular CLI's installation schematic to set up your Angular Material project by running the following command: ```bash ng add @angular/material ``` For detailed installation instructions, please refer to the following link: [**Angular Material Installation Guide**](https://v14.material.angular.io/guide/getting-started). 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.
ThemeLight or darkPalettes (primary,accent,warn)
deeppurple-amber.cssLightdeep-purple, amber, red
indigo-pink.cssLightindigo, pink, red
pink-bluegrey.cssDarkpink, blue-grey, red
purple-green.cssDarkpurple, 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. ```javascript "styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", ] ``` {% hint style="info" %} 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. {% endhint %} {% hint style="success" %} You're done! Angular Material is now configured to be used in your application. {% endhint %} ### 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. {% hint style="warning" %} Failure to include this import will result in the deactivation of most of Angular Material's animations. {% endhint %} ```javascript 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. {% code lineNumbers="true" %} ```javascript @NgModule({ declarations: [ AppComponent ], imports: [ BrowserAnimationsModule, CoreModule, CommonModule, ], bootstrap: [AppComponent], providers: [ CacheService, ChatLibService, ], }) ``` {% endcode %} For further details, please visit the following link: [**https://zerotomastery.io/blog/angular-animations-and-examples/**](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. {% code lineNumbers="true" %} ```javascript 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'; ``` {% endcode %} Add the Angular Material modules you imported to the **`imports`** array inside the **`@NgModule`** decorator within the **"material.module.ts"** file. {% code lineNumbers="true" %} ```javascript @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 ] }) ``` {% endcode %} We imported the previously created "**material.module.ts**" file into the "**shared.module.ts**" file. ```javascript 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://ed.sunbird.org/release-6.0.0/use/source-code/ui-user-interface-sunbird-ed-portal/angular-material/installation.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.