Angular Material Divider/ Content

<Mat-divider> is an Angular Material directive that allows us for styling a line separator's contents with different orientation options. It is used to create a divider with content design styling and animation capabilities. It provides a separator between two objects.

Simple divider

An <matte-divider> element is used to create a horizontal or vertical line with the content.

Inset divider

We add the inset attribute to determine the divider is inset divider or not.

Vertical divider

Add the vertical attribute to set the divider is vertically-oriented or not.

Lists with inset dividers

Dividers can be added to lists to separating content into different classes. Inset dividers can also be added to provide the presence of separate elements in a list without clutter content such as avatar images or icons.

<mat-list>
   <h3 mat-subheader>Folders</h3>
   <mat-list-item *ngFor="let folder of folders; last as last">
      <mat-icon mat-list-icon>folder</mat-icon>
      <h4 mat-line>{{folder.name}}</h4>
      <p mat-line class="demo-2"> {{folder.updated}} </p>
      <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
   </mat-list-item>
   <mat-divider></mat-divider>
   <h3 mat-subheader>Notes</h3>
   <mat-list-item *ngFor="let note of notes">
      <mat-icon mat-list-icon>note</mat-icon>
      <h4 mat-line>{{note.name}}</h4>
      <p mat-line class="demo-2"> {{note.updated}} </p>
   </mat-list-item>
</mat-list>

Example 1:

Follow the steps to update the Angular application that we created in Angular:

Create a project with the name materialApp
Addmodule.ts , app.component.ts, app.component.css, and app.component.html as below.
Compile the code to verify the result.

Below is the content of the modified module descriptor 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, MatListModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatDividerModule, MatListModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Below is the modified HTML host file app.component.html.

<mat-list>
   <mat-list-item>Apple</mat-list-item>
   <mat-divider></mat-divider>
   <mat-list-item>Orange</mat-list-item>
   <mat-divider></mat-divider>
   <mat-list-item>Banana</mat-list-item>
</mat-list>

Output:

Explanation:

Previously, we have created a list using the mat-list.
Then, we have added dividers between list items by using mat-divider.

Example 2:

app.component.html

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

app.component.ts

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

/**
* @title Basic divider
 */
@Component({
  selector: 'divider-overview-example',
 templateUrl: 'divider-overview-example.html',
})
export class DividerOverviewExample {}

Output:

Angular Material Content

The Angular Directive <md-content> is a container element that is used for scrollable content. The layout-padding feature is added to the padded material.

The example below also shows the use of the md-content directive and the use of angular content display.

am_content.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <script type = "text/javascript">    
         angular.module('firstApplication', ['ngMaterial']);
      </script>
   </head>
   <body ng-app = "firstApplication" ng-cloak>
      <md-toolbar class = "md-warn">
         <div class = "md-toolbar-tools">
            <h2 class = "md-flex">HTML 5</h2>
         </div>
      </md-toolbar>
       <md-content flex layout-padding>
         <p>HTML5 is the next major revision of the HTML standard superseding HTML
         4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard used for 
         presenting content on the World Wide Web.</p>
         <p>HTML5 is a cooperation between the World Wide Web Consortium and the Web Hypertext Application Technology Working Group</p>         
         <p>The new incorporates features like video playback and drag-and-drop
         that have been dependent on third-party browser plug-ins such as Adobe
         Flash, Microsoft Silverlight, and Google Gears.</p>
      </md-content>
   </body>
</html>

Output: