Angular Material Divider : Mat-Divider Example

Angular Material Divider component _mat-divider_  a simple line divider that groups elements in list and layout by following material design styles.

Importing mat-divider module

To use mat-divider we have to import MatDividerModule from angular material module.

Directive is MatDivider and selector is mat-divider.

import {MatDividerModule} from '@angular/material/divider';

Angular Material Divider mat-divider types

We have three types of material dividers depending upon our usage.

1. Simple divider
2. Inset divider
3. Vertical divider

Simple mat-divider example

Just add <mat-divider> it will display a simple divider i.e., horizontaal line

<mat-divider></mat-divider>

Usually we can use the mat-divider inside a list to separate the contents.

<mat-list>
<mat-list-item>One</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Two</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Three</mat-list-item>
</mat-list>

mat-divider Inset example

We can set inset attribute to true to display inset divider

<mat-divider [inset]="true"></mat-divider>

Here is the complete example which shows the difference between simple divider and inset divider

<mat-list>
 <mat-list-item>One</mat-list-item>
 <mat-divider></mat-divider>
 <mat-list-item>Two</mat-list-item>
 <mat-divider inset=“true”></mat-divider>
 <mat-list-item>Three</mat-list-item>
 <mat-divider></mat-divider>
</mat-list> 

mat-divider vertical example

To set the orientaion of the mat-divider horizontal or vertical, we can use vertical attribute.

<mat-divider [vertical]="true"></mat-divider>

mat-divider style

Whenever we use material divider i.e., mat-divider, angular framework adds a class named mat-divider to the element as shown below

<mat-divider _ngcontent-c1="" 
class="mat-divider mat-divider-horizontal" 
role="separator" 
aria-orientation="horizontal">
</mat-divider>

And the corresponding CSS for the class .mat-divider is

.mat-divider {
   display: block;
   margin: 0;
   border-top-width: 1px;
   border-top-style: solid;
}

And the color of the .mat-divider depending upon the theme we use for instance I am using Angular Material _indigo-pink.css. _The color of the mat-divider is rgba(0,0,0,.12).

.mat-divider{
  border-top-color: rgba(0,0,0,.12);
}

We can override these css classes to change the color or thickness of the mat-divider.

But change the color according to material design specifications

mat-divider color

To change the color mat-divider simply change the border-top-color property of .mat-divider class.

.mat-divider {
  border-top-color: red;
}

mat-divider thickness

To change the thickness of the mat-divider, override the default border-top-width or border-top-style properties of .mat-divider class.

.mat-divider{
  border-top-width: 2px;
  border-top-style: dashed;
}

Additionally we can change style of the mat-divider by overriding border-top-style property.

mat-divider properties

mat-divider not showing

If you are using older versions of Angular Material i.e., version 5.1 below, mat-divider available as part of MatListModule.

So in the below example mat-divider visible only if we are using MatListModule.

<p>
  No "mat-list" in component html
</p>

<p>Sample text before mat-divider</p>
<mat-divider></mat-divider>
<p>Sample text After mat-divider</p>

In the above case mat-divider will not show as we are not using MatListModule.

<p>
"mat-list" in component html
</p>

<mat-list>
<mat-list-item>Sample List</mat-list-item>
</mat-list>

<p>Sample text before mat-divider</p>
<mat-divider></mat-divider>
<p>Sample text After mat-divider</p>

mat-divider is visible in this case because we are using MatListModules.

As part of Angular Material 5.1 version they moved mat-divider out of mat-list.

mat-divider vertical not working

It seems mat-divider vertical is not working as expected. There is a open git issue regarding this issue.

mat-divider is not a known element

If you miss importing MatDividerModule from @angular/material you will get an error saying mat-divider is not a known element.

As explained in angular material tutorial it is better to create a separate module for material components and Add the required modules whenever required.