Angular Material 13 Vertical and Horizontal Divider Tutorial

This tutorial will cover the simple yet most helpful topic of angular material divider component. Using the material design library, you will learn how to create a divider in an angular application.

We will build a horizontal list divider in angular and create a vertical divider in angular using the mat-divider component.

The mat-divider is a component that comes into light when you need to implement Material styling for creating a line separator. It also offers multiple orientation options to customize the line divider in angular.

MatDivider applies the ARIA role=”separator” attribute, solely executing the non-focusable style of the separator that demonstrates sections of content.

How to Create Vertical and Horizontal Divider in Angular using mat-divider Directive

  • Step 1: Install Angular Project
  • Step 2: Install Angular Material Module
  • Step 3: Build Material Module File
  • Step 4: Create List with Horizontal Divider
  • Step 5: Create Vertical Divider
  • Step 6: Run Development Server

Install Angular Project

Make sure to install the angular cli using the given command in your system.

npm install -g @angular/cli

With just a single line of command you can create a new angular application.

ng new ng-material-demo

Move into the app folder through given command.

cd ng-material-demo

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, therefore, you need to update the compilerOptions and angularCompilerOptions in tsconfig.json file for disabling the strict mode:

{
   “strict”: false, 
   "noImplicitReturns": false 
   "strictTemplates": false
}

Install Angular Material Module

Execute the following command from the command prompt to add the angular material library in angular project.

ng add @angular/material

You can set the prebuilt theme, angular material typography and browser animation by selecting the given options.

  1. Choose a prebuilt theme name or “custom” for a custom theme:

    You can choose from prebuilt material design themes or set up an extensible custom theme.

  2. Set up global Angular Material typography styles:

    Whether to apply the global typography styles to your application.

  3. Set up browser animations for Angular Material:

    Importing the BrowserAnimationsModule into your application enables Angular’s animation system. Declining this will disable most of Angular Material’s animations.

Angular material CSS has to be added into the src/styles.scss file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Build Material Module File

Head over to src/ directory, in this folder you have to make a new /material.module.ts file.

Start importing all the given angular modules, this file will have all the modules that you might need in angular development for UI component formation.

However, if you want, you can only import MatDividerModule and can build the divider UI component.

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { CdkAccordionModule } from '@angular/cdk/accordion';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  exports: [
    A11yModule,
    CdkAccordionModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    OverlayModule,
    PortalModule,
    ScrollingModule,
  ],
})

export class MaterialModule {}

Open the app/app.module.ts file, in this file import the CUSTOM_ELEMENTS_SCHEMA, and MaterialModule modules.

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

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

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../material.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

export class AppModule {}

Create List with Horizontal Divider

In this step, we will show you how to implement a simple horizontal divider in a basic list using mat-divider therefore you need to open the app.component.html file and insert the given code into the file.

<h2>Angular Material Simple Horizontal List Divider Example</h2>

<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-list>

Create Vertical Divider

You have to add the vertical attribute and insert prop in the mat-divider directive to formulate the vertical divider.

<h2>Angular Material Vertical Divider Example</h2>

<mat-divider inset vertical></mat-divider>

Run Development Server

Start the application’s development server by running the given command.

ng serve

Open the url in the browser to view the app:

http://localhost:4200

Angular Material 13 Vertical and Horizontal Divider Tutorial

Conclusion

In this guide, we focused on the simple line divider component that we learned to create in angular using the angular material’s divider component.

We have learned how to integrate a horizontal line divider in list items. We also learned how to create a vertical line divider in angular using the mat-divider directive.