Adding Core UI Controls

Angular Material consists of many components of different types. Some of the most basic ones are:

• Buttons: These are what they sound like—buttons we can push. But there are several different types that we can use, such as icon buttons, raised buttons, and more.

• Form controls: These are any controls that we use to collect data from a form, such as autocomplete, checkbox, input, radio button, and drop-down list.

• Navigation: These are controls used to perform navigation, such as a menu, sidenav, or toolbar.

• Layout: These are controls that define how data is arranged on a page, such as a list, card, or tabs.

• Popups/modals: These are overlay windows that block any user interaction until they are dismissed in any way.

• Tables: These are controls that are used to display data in a tabular way. What kind of table we need depends on whether our data is massive, needs pagination, needs to be sorted, or all of these.

• Integration controls: These are controls that integrate external services in an Angular Material application like Google Maps and YouTube.

Next, we will explore each category in more detail.

Buttons

We have already learned how to create a simple button with Angular Material. There are, however, a lot more button types, namely the following:

• mat-raised-button: A button displayed with a shadow to indicate its raised state. A variation of this button is mat-flat-button, which is the same button but without a shadow.

• mat-stroked-button: A button with a border.

• mat-icon-button: A button that displays an icon only, without text.

• mat-fab: A rounded button with an icon. A variation of this type is mat-mini-fab, which displays a smaller button.

• mat-button-toggle: A button with on/off capabilities that indicate whether it has been pressed or not.

In the following snippet, we can see how to use each button type: