Adding Angular Material to your Angular Project
Tags: angular, beginners
Published: 2023-04-30 05:42:37

So, you are developing a new project and have decided to use Angular as your front-end framework. You came across Angular Material and decided to use it as the component library for your new Angular project, but haven't tried it before. In this post, we'll discuss adding Angular Material to your new project. But first, we need to understand what Angular Material is, as a component library.


## What is a component library? 🤔
A component library is a collection of UI elements, including buttons, fonts, visuals, and other design elements, compiled or stored in a single file or folder. It is also referred to as UI kit or UI library and is one of the building blocks of a design system. 

![UI components](https://www.datocms-assets.com/48294/1664023731-component-library-vs-ds-image-1-ui-elements-for-design-systems-justinmind.webp?auto=format&dpr=0.54&w=1500)

As we develop our web applications, we aim to maintain a consistent design system for our front-end pages. What a component library is a collection of reusable user interface components, so that they can be used consistently across different projects. 


## Angular Material 📦
Angular material is google's official component library. It offers support for standard CSS and has simple APIs with consistent cross platform behavior. The component library also offers customizable components that are within compliance of [material design](https://m2.material.io/design) specifications.

## Adding Angular Material ➕
We will go through step-by-step process to ensure no detail is left out in this demonstration. Start by creating a new project with `ng serve`. You can choose to include Angular routing and then select SCSS as the style-sheet format.
```bash
ng new angular-material-demo
```

One thing to note is that we cannot simply choose any version of Angular Material to include in our new project. We must add the appropriate version that suits the Angular version installed on our machine. To determine the Angular version installed, run `ng --version` in your terminal.

> The rule of thumb for selecting the Angular Material version to add to your project is that the version number must match the Angular version installed. For instance, if you have Angular version 7, you will need to install the 7.3.7 version of Angular Material. You can refer to this [webpage](https://www.educba.com/angular-material-version/) to get the appropriate command to run in the terminal for the version you need.

We should also install the Angular Component Dev Kit (CDK) of the same version. Angular CDK (Component Dev Kit) is a set of tools and utilities that can be used to build complex and scalable web applications with Angular. Angular material needs cdk to work.

> So pairing up my commands with installing angular material with installing angular cdk, i'll run this command on the terminal: `npm i @angular/material@7.3.7 && npm i @angular/cdk@7.3.7`.

After running the command for adding Angular Material (`npm i <angular-material-version>`), you should be able to observe changes in your project's `package-lock.json` and `package.json` files.


![package-lock.json of project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfys8f7szc5iq689w14j.png)

![package.json of project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcr6gp5ribedcjg67eqa.png)

You can run `ng serve` to test out if it works 😉.

## Using Angular Material Components ✨
You can refer to the Angular Material web documentation. On the [webpage](https://material.angular.io/), you can also select the Angular Material version on the top-right side of the navigation bar.

We will use Material toolbar, input, and button components here as simple example. Go to your code editor, ensure your terminal is focused on your project directory, then run `ng generate module material`.

> We will create a module here for importing the components from angular material. This is a more cleaner way than to just put all import declarations on `app.module.ts`.

On `material.module.ts`, delete the code on line # 2 that imports `CommonModule` and replace it with:
```typescript
import { 
  MatToolbarModule, 
  MatButtonModule,
  MatInputModule
 } from '@angular/material';
```
This imports the toolbar, button and input modules from angular material. We will now create an array and name it `material`, we will use this array as placeholder for UI components that we want to initialize. 
```typescript
const material = [
  MatToolbarModule, 
  MatButtonModule,
  MatInputModule
];
```

And then replace the contents of `@NgModule`'s export and import with reference to `material`. The final result of your `material.module.ts` should look like this 👇.
```typescript
import { NgModule } from '@angular/core';

import { 
  MatToolbarModule, 
  MatButtonModule,
  MatInputModule
 } from '@angular/material';

const material = [
  MatToolbarModule, 
  MatButtonModule,
  MatInputModule
];

@NgModule({
  exports: [material],
  imports: [material]
})
export class MaterialModule { }

```

Now go to `app.module.ts` file of the project and import **MaterialModule** and **BrowserAnimationsModule**.
```typescript
import {MaterialModule} from './material/material.module'
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'
```


And then add it to the `imports` array inside the `@NgModule`. The contents of `@NgModule` should appear as follows.
```typescript
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MaterialModule,      // add material module and browser animations module to imports array ✨
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
```

Add this line of code, `@import '@angular/material/prebuilt-themes/deeppurple-amber.css';`, to your project's **styles.css** file. This is a pre-built theme from Angular Material.

And finally, in the project's `app.component.html`, replace the blocks of code above `<router-outlet>` with this code.
```html
<mat-toolbar>
  <span>Angular Material Demo</span>
</mat-toolbar>

<div>
  <mat-label>Name:</mat-label>
  <mat-form-field><input matInput></mat-form-field>
</div>

<div>
  <mat-label>Age:</mat-label>
  <mat-form-field><input matInput type="number"></mat-form-field>
</div>

<div>
  <mat-label>Address:</mat-label>
  <mat-form-field><input matInput></mat-form-field>
</div>

<button mat-raised-button color="primary">Submit</button>
```

After executing `ng serve` on your terminal, the final output should resemble the following.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/le0if56c2ro13hqrz5t8.png)

To use the other components of Angular Material, refer to the official web documentation [here](https://material.angular.io/). The documentation offers examples of how to use the various UI components in their library. Additionally, you can check out [this YouTube playlist tutorial](https://youtube.com/playlist?list=PLC3y8-rFHvwilEuCqFGTL5Gt5U6deIrsU) from **Codevolution** on Angular Material. I personally recommend their tutorial playlist because they explain how to use the Angular Material components in an easy-to-understand manner.   

{% youtube https://youtu.be/bV8emCBmFHk %}