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.
Simple divider
An <matte-divider> element is used to create a horizontal or vertical line with the content.
Inset divider
We add the inset attribute to determine the divider is inset divider or not.
Vertical divider
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.
Example 1:
Follow the steps to update the Angular application that we created in Angular:
- Create a project with the name materialApp
- Addmodule.ts , app.component.ts, app.component.css, and app.component.html as below.
- Compile the code to verify the result.
Below is the content of the modified module descriptor app.module.ts.
Below is the modified HTML host file app.component.html.
Output:
Explanation:
- Previously, we have created a list using the mat-list.
- Then, we have added dividers between list items by using mat-divider.
Example 2:
app.component.html
app.component.ts
Output:
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.
am_content.htm
Output:
