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.
- Simple divider
- Inset divider
- 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 property | description |
---|---|
inset | to use inset divider set the property value to true. |
vertical | to use vertical divider set the property value to true |
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.