Angular Material Divider/ Content
<Mat-divider> is an Angular Material directive that allows us for styling a line separator's contents with different orientation options. It is used to create a divider with content design styling and animation capabilities. It provides a separator between two objects.
An <matte-divider> element is used to create a horizontal or vertical line with the content.
We add the inset attribute to determine the divider is inset divider or not.
Add the vertical attribute to set the divider is vertically-oriented or not.
Lists with inset dividers
Dividers can be added to lists to separating content into different classes. Inset dividers can also be added to provide the presence of separate elements in a list without clutter content such as avatar images or icons.
Follow the steps to update the Angular application that we created in Angular:
Below is the content of the modified module descriptor app.module.ts.
Below is the modified HTML host file app.component.html.
Angular Material Content
The Angular Directive <md-content> is a container element that is used for scrollable content. The layout-padding feature is added to the padded material.
The example below also shows the use of the md-content directive and the use of angular content display.