Javatpoint Logo
Javatpoint Logo

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.


Angular Material Divider/ Content


  • Previously, we have created a list using the mat-list.
  • Then, we have added dividers between list items by using mat-divider.

Example 2:




Angular Material Divider/ Content

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.



Angular Material Divider/ Content

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA