Using Angular Material for our UI

The frontend of our application is going to use something called Angular Material instead of relying on Bootstrap. We are going to look at Material because it's widely used with Angular applications; therefore, if you are going to develop with Angular commercially, there's a good chance that you will use it in your career at some point.

Angular Material was built by the Angular team to bring Material Design components to Angular. The idea behind them is that they integrate seamlessly into the Angular development process so that they feel no different to using standard HTML components. These design components go well beyond what we can do with single standard controls, so we can easily build complex navigation layouts with them, for instance.

Material components bring behaviors and visual appearance together so that, out of the box, we can use them to create professional-looking applications with minimal effort on our part. To a certain extent, Material can be thought of as a similar experience to using Bootstrap. In this chapter, we are going to concentrate on using Material instead of Bootstrap.

A couple of paragraphs ago, we rather glibly mentioned that Angular Material brings Material Design components to Angular. This is a largely circular statement until we understand what Material Design is. If we search Google for the term, we get lots of articles telling us that Material Design is Google's design language.

Certainly, if we do Android development, the term comes up frequently because Android and Material are fundamentally linked. The idea behind Material is that it is in the best interests of our users if we can present interface elements in a way that is consistent. So, if we adopt Material, our applications will look familiar to users who are used to applications such as Gmail.

The term design language is too vague, though. What does it actually mean to us? Why does it have its own fancy term? In the same way that our own language is broken down and structured into words and punctuation, we can break visual elements down into structures such as color and depth. As an example, the language tells us what colors mean, so if we see a button with one color on one screen in our application, it should have the same underlying usage across other screens in our application; we wouldn't use a green button to signify OK on one dialog and then Cancel on another.

Installing Angular Material is a simple process. We run the following command to add support for Angular Material, the Component Design Toolkit (CDK), flexible layout support, and animation support:

ng add @angular/material @angular/cdk @angular/animation @angular/flex-layout

During the installation of the libraries, we will be prompted to choose what theme we want to use. The most visible aspect of the theme is the color scheme that is applied.

We can choose from the following themes (examples of the themes are also supplied):

For our application, we are going to use the Indigo/Pink theme.

We are also prompted about whether or not we want to add HammerJS support. This library provides gesture recognition so our applications can respond to things such as panning or rotating using touch or the mouse. Finally, we have to choose whether or not we want to set up browser animations for Angular Material.

The CDK is an abstraction that says how common Material features work, but it does not say what they will look like. Without installing the CDK, many features of the Material library just won't work, so it's important to ensure that it is installed alongside @angular/material.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.35.148