Angular 15 material divider tutorial| mat-divider examples

Angular 15 material divider tutorial| mat-divider examples

Divider is a UI element to separate the UI components with a thin line horizontally or vertically. This helps organize and group the elements in the layouts of a page.

Angular material provides divider components in a separate module MatDividerModule.

Angular Pipe Tutorials

This application uses the Angular 15 version, So the MatDividerModule module needs to configure.

First, install angular material dependencies using the below command.

npm install  @angular/cdk  --save-dev
npm install @angular/material --save-dev

It installs dependencies and adds these dependencies in package.json.

"@angular/cdk": "13.0.3",
"@angular/material": "13.0.3",

Once the dependencies are installed in your project.

Import MatDividerModule in app.module.ts or shared module.

import NgModule allows importing other modules. this allows using all the components/pipes/directives of the module to be accessible across your module.

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";
import { MatDividerModule } from "@angular/material/divider";

@NgModule({
  imports: [BrowserModule, FormsModule, MatDividerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Angular material horizontal divider example

mat-divider is a directive used in HTML components. It has option attributes.

if the optional attribute is not declared, it displays in a horizontal line.

<div>
  <p>this is horizontal demo</p>
  <mat-divider></mat-divider>
  <p>line1</p>
  <mat-divider></mat-divider>
  <p>line2</p>

  <mat-divider></mat-divider>
  <p>line3</p>
  <mat-divider></mat-divider>
</div>

Angular material vertical divider example

the vertical attribute has to be added divider and provide style with height

<mat-divider vertical style="height:40px"></mat-divider>
<mat-divider [vertical]="true" style="height:40px"></mat-divider>

Angular Inset material divider usage

the divider can be applied with an inset attribute true or false

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

Angular Material list items separated with a divider

Please import MatListModule into the app.module.ts file to use the material list.

app.module.ts

import { MatListModule } from "@angular/material/list";

@NgModule({
  imports: [MatListModule],
  declarations: [],
  bootstrap: [],
})
export class AppModule {}

in the Angular component template file, created mat-list with each list item is separated by mat-divider as follows

<div style="width:100px">
  <p>this is mat list divider demo</p>
  <mat-list>
    <mat-list-item> Sunday </mat-list-item>
    <mat-divider></mat-divider>
    <mat-list-item> Monday </mat-list-item>
    <mat-divider></mat-divider>
    <mat-list-item> Tuesday </mat-list-item>
  </mat-list>
</div>

How to change material divider CSS styles

The material provides the following CSS selectors.

  • mat-divider
  • mat-divider-horizontal
  • mat-divider-vertical

You can override the CSS/sass file of your component.

In your code, border-top-color of mat-divider CSS styles are required to change color

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

angular Divider is not showing or not working

Sometimes once everything is configured correctly, the Material divider does not show the lines on the page.

Let’s see some possible errors and their solutions

mat-divider is not a known element error

This error comes either during development, unit testing UI components,

mat-divider component is included in MatDividerModule, importing this module is required to fix this error

Import MatDividerModule in either in your module or shared module as below

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";
import { HelloComponent } from "./hello.component";
import { MatDividerModule } from "@angular/material/divider";

@NgModule({
  imports: [BrowserModule, FormsModule, MatDividerModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

If the issue is produced during the unit testing of your components,

import this module in your test component like imports: [MatDividerModule]

import { MatDividerModule } from "@angular/material";
import { MyComponent } from "./my.component";

describe("FvCreationPopupComponent", () => {
    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
        imports: [MatDividerModule],
        declarations: [ MyComponent ],
        .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it("Test  object exists", () => {
        expect(component).toBeTruthy();
    });

});

Conclusion

Angular material divider learning is completed, In this post, You learned how to add horizontal and vertical material dividers and also override CSS styles for a divider.

example code is available at angular material divider stacblitz🔗