# #2 💅Add Angular Material

Angular Material is a UI (User Interface) component library that can help you to style your application based on modern web design principles. The following steps show you how to get started with Angular Material.

## Add Angular Material packages

Import the Browser Animation Module into [`src/app/app.module.ts`](https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/app.module.ts#L5) file as shown below.

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

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

Some features of Angular material require `HammerJS`.

Import it into [`src/main.ts`](https://github.com/AnkitSharma-007/blogsite/blob/master/src/main.ts#L6). This file is the entry point of our app.

```
import 'hammerjs';
```

## Add a material theme

We will add a built-in material theme globally by including the following line in [`src/styles.scss`](https://github.com/AnkitSharma-007/blogsite/blob/master/src/styles.scss#L3) file.

```
@import  "~@angular/material/prebuilt-themes/indigo-pink.css";
```

## Add a module for Angular material

We will create a new module to include all the material related components. Right click on the 📁`ng-material` folder and navigate to 'Angular Generator' and select 'Module'. Then provide the name `ng-material` for our new module.

Open `src/app/ng-material/ng-material.module.ts` and REPLACE what is there with the code in [ng-material.module.ts (Github)](https://github.com/ng-girls/todo-list-tutorial/blob/master/workshops/blog-editor/code/02-ng-material/ng-material.module.ts)

Import this new `NgMaterialModule` in 📝`src/app/app.module.ts` as shown below.

```
import { NgMaterialModule } from  './ng-material/ng-material.module';

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


---

# 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://ng-girls.gitbook.io/todo-list-tutorial/more-workshops/index/02_add_material.md?ask=<question>
```

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.