Angular Material Divider Example | Angular 9 mat-divider

By Hardik Savani | July 23, 2020 | Category : Angular


In this example, i will show you angular material divider example. you can understand a concept of angular material vertical divider example. you will learn angular 9 material divider example. this example will help you divider angular material.

Angular Material Divider component will allow you to create line separator with various orientation options.

Angular Material provides a wide range of web components which are very easy to implement and use in Angular applications for creating divider, card, badge, forms, steps, menu etc. In this example we will learn how to use angular divider.

I will show you how to use material divider ui in angular 6, angular 7, angular 8, angular 9 and angular 10. i will give you very basic example of angular material design divider so you can use in your application.

I will give you list of examples:

1) Simple Angular Material Divider Example

2) Angular Material Inset Divider Example

3) Angular Material Vertical Divider Example

4) Angular Material Divider with Style CSS Example

Create New App

If you are doing example from scratch then You can easily create your angular app using bellow command:

ng new newMat

Add Material Design

Now in this step, we need to just install material design theme in our angular application. so let's add as like bellow:

ng add @angular/material

Cmd like bellow:

Installing packages for tooling via npm.

Installed packages for tooling via npm.

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink

[ Preview: https://material.angular.io?theme=indigo-pink ]

? Set up global Angular Material typography styles? Yes

? Set up browser animations for Angular Material? Yes

Import Material Divider Module

Here, we will simply import MatDividerModule, MatListModule and BrowserAnimationsModule module for creating very simple example. so let's import on module.ts file.

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

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

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

BrowserAnimationsModule,

MatDividerModule,

MatListModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Example 1: Simple Angular Material Divider Example

we will use matBadge for creating Divider in angular app. so let's update follow html file.

src/app/app.component.html

<h1>Angular Material Divider Example - ItSolutionStuff.com</h1>

<mat-list>

<mat-list-item>Item 1</mat-list-item>

<mat-divider></mat-divider>

<mat-list-item>Item 2</mat-list-item>

<mat-divider></mat-divider>

<mat-list-item>Item 3</mat-list-item>

<mat-divider></mat-divider>

<mat-list-item>Item 4</mat-list-item>

<mat-divider></mat-divider>

<mat-list-item>Item 5</mat-list-item>

</mat-list>

Now you can see layout as like bellow:

Example 2: Angular Material Inset Divider Example

src/app/app.component.html

<h1>Angular Material Divider Example - ItSolutionStuff.com</h1>

<mat-list>

<mat-list-item>Item 1</mat-list-item>

<mat-divider></mat-divider>

<mat-list-item>Item 2</mat-list-item>

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

<mat-list-item>Item 3</mat-list-item>

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

<mat-list-item>Item 4</mat-list-item>

<mat-divider></mat-divider>

<mat-list-item>Item 5</mat-list-item>

</mat-list>

Now you can see layout as like bellow:

Example 3: Angular Material Vertical Divider Example

src/app/app.component.html

<h1>Angular Material Divider Example - ItSolutionStuff.com</h1>

<mat-list>

<mat-list-item>Item 1</mat-list-item>

<mat-divider></mat-divider>

<mat-list-item>Item 2</mat-list-item>

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

<mat-list-item>Item 3</mat-list-item>

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

<mat-list-item>Item 4</mat-list-item>

<mat-divider></mat-divider>

<mat-list-item>Item 5</mat-list-item>

</mat-list>

Example 4: Angular Material Divider with Style CSS Example

src/app/app.component.html

<h1>Angular Material Divider Example - ItSolutionStuff.com</h1>

<mat-list>

<mat-list-item>Item 1</mat-list-item>

<mat-divider></mat-divider>

<mat-list-item>Item 2</mat-list-item>

<mat-divider></mat-divider>

<mat-list-item>Item 3</mat-list-item>

<mat-divider></mat-divider>

<mat-list-item>Item 4</mat-list-item>

<mat-divider></mat-divider>

<mat-list-item>Item 5</mat-list-item>

</mat-list>

src/app/app.component.css

.mat-divider{

border-top-width: 2px;

border-top-style: dashed;

}

Now you can see layout as like bellow:

Now you can run by bellow command:

ng serve

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: