{

Angular 13 material divider tutorial| mat-divider examples


 Angular Tutorials - Example about an anchor bind tag click event without a href

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

Angular material provides divider components in a separate module MatDividerModule.

if you are using the angular 5 versions, You have to MatListModule as a divider is part of MatListModule.

This application uses the Angular 13 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 of 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 { }

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>

material vertical divider example

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>

Inset material divider usage

divider can be applied with inset attribute true or false

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

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 a 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 your 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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.