I made some small layout and styling changes to Angular Framework's "Tour of Heroes" tutorial app. It looked a little better to me, but those changes didn't stick around for long. They were merely a HTML/CSS warmup exercise and quickly replaced by the next activity: converting the app to use Angular Material component library.

While I don't necessarily agree with everything in Google's Material Design, for better or worse Google's reach meant most users would already be familiar with them. The option to utilize Angular Material component library was, in fact, the main motivation for me to learn Angular. Now that I'm finally at this point, I eagerly opened up their Getting Started page and got to work. The instructions were fine and putting the library to use was about as easy as I can reasonably ask for. There were two items of note:

Import

This was taught right up front on "Displaying a component" section of Getting Started page, but I didn't grasp its significance at first. Each Angular Material component is packaged in a module that we have to import before use, making every component (and associated overhead) an opt-in decision. This is not illustrated by their live examples on Stackblitz, because those examples imported everything. I wasted time trying to sort out exactly what was important until I figured out that they tell you in the "API" section of each component's documentation. Example: the first line of Material Button API page is:

import {MatButtonModule} from '@angular/material/button';

And Reload

After importing the module as per API documentation, I could use that component, but it didn't look right. Most of the behaviors were there, but appearance-wise it didn't look quite right. Style bits were missing here and there, the most visible aspect was that I didn't see any theme colors. We're supposed to be able to select from "Primary", "Accent" or "Warn" colors but the control looked plain despite setting color to one of those options.

Hunting on answers from Stack Overflow found a lot of information about defining and using custom themes, which I don't care about (yet). But buried among custom theming information was my answer: after importing a component, the development server launched by the "ng serve" command would only pick up partial functionality. There was nothing wrong with my code. To pick up everything, including theme colors, I had to stop the running instance of "ng serve" and launch it again.

Looks Great! But...

Getting this far meant I could fold several Angular Material controls into my "Tour of Heroes" app. Using Angular Material controls meant I could delete a lot of CSS associated with custom styling of the tutorial. Utilizing this component library in my own projects should mean less fussing with CSS for styling. This is a great benefit as I don't consider myself any good at user interface design. But this ease has a tradeoff in larger download size.

Code for this project is publicly available on GitHub