Using a Component Library: Angular Material

Up until now we have been using custom CSS and Bootstrap, a CSS library to style our web applications. In this chapter we are going to take a look at using Angular Material to add style and dress up the FredsCars website.

What is Angular Material

It’s hard to find a great definition of what exactly Angular Material is. But I like this one I found at: https://auth0.com/blog/creating-beautiful-apps-with-angular-material/

Angular Material is a User Interface (UI) component library that developers can use in their Angular projects to speed up the development of elegant and consistent user interfaces. Angular Material offers you reusable and beautiful UI components like Cards, Inputs, Data Tables, Datepickers, and much more.

Angular Material Definition

The components in Angular Material are just that, Angular components, just like our Welcome and Vehicles components in FredsCars. We apply the Angular Material components by including their elements and directives in our html as we soon will see.

Installing Angular Material

Navigate to your FredsCars Angular project with the following command:

cd C:\Development\FredsCars\FullStack\Module12\FredsCars

Next run the following command to install Angular Material into the FredsCars Angular project.

ng add @angular/material

You will see a message saying that the node package manager is searching for a compatible version of Angular Material that will work well with your project’s dependencies.

Next you should see a message saying npm found a compatible version.

Next you’ll see a message asking if you would like to proceed. Type ‘Y’.

Next you’ll be asked to choose a theme. Hit Enter to choose Indigo/Pink.

Next type ‘y’ to “set up global Angular Material typography styles.

Next choose “Include and enable animations.

Shortly after you should see that the packages were installed successfuly, and that four files were updated.

The install updated the four files listed in the following ways:

app.module.ts: Add the BrowserAnimationsModule to the imports section.

angular.json: register the CSS for the Angular Material Indigo-theme.

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

index.html:

* remove margins from body.

* Set height to 100% on html and body.

* Set Roboto as the default application font.

* Add a Style Sheet link to Angular Material Icons.

View Angular Material Typography Styles

If you recall back in chapter one when we were first learning CSS and Bootstrap, once we installed Bootstrap the font immediately changed from the browser defaults to the Bootstrap styles for text, headings and so forth. Angular Material is very similar. Now that we have it installed in our FredsCars Angular project, lets restart the project and take a look.

Before we installed Angular Material, this is what our Welcome page looked like.

---

And after the install this is what it looks like.

---

I think the font here is much improved, maybe even better than Bootstrap. And, just like when we use Bootstrap we now have a similar issue to fix. Their is no padding on the left and top of the content. Let’s fix that real quick before moving on.

Give me some space!

Open the app.component.css file in the FredsCars/src/app folder and add the following code.

FredsCars\src\app\app.component.css

.container {
  padding: 20px 10px 20px 10px;
}

We are adding 20 pixels of padding to the top and bottom of the content below the nav section and 10 pixels of padding to the left and right.

The results should look similar to the image below.

What’s Next

In this module we installed Angular Material and took a look at what files are modified in the process. In the next module we will improve the look of the Nav Bar by using our first Angular Material Component: MatToolBar