Layout

When we refer to the layout, we discuss how we place content in our templates. Angular Material gives us different components for this purpose:

• List: Visualizes the content as a list of items. It can be enriched with links and icons and even multiline.

• Grid list: Helps us arrange the content in blocks. We only need to define the number of columns, and the component will fill out the visual space.

• Card: Wraps content and adds a box shadow. We can define a header for it as well.

• Tabs: Divides up the content into different tabs.

• Stepper: Divides up the content into wizard-like steps.

• Expansion panel: Works in a similar way to an accordion. It enables us to place the content in a list-like way with a title for each item. Items can only be expanded one at a time.

In the following sections, we will cover the list and grid-list components.

Implementing Angular Material list

The list control is built up by a <mat-list> element that contains a set of <mat-list-item> elements: