Question

Explain Angular Material Divider/ Content

Answer 1

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

1. <mat-divider></mat-divider>  

Inset divider

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

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

Vertical divider

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

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

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.

1. <mat-list>  
2.    <h3 mat-subheader>Folders</h3>  
3.    <mat-list-item *ngFor="let folder of folders; last as last">  
4.       <mat-icon mat-list-icon>folder</mat-icon>  
5.       <h4 mat-line>{{folder.name}}</h4>  
6.       <p mat-line class="demo-2"> {{folder.updated}} </p>  
7.       <mat-divider [inset]="true" *ngIf="!last"></mat-divider>  
8.    </mat-list-item>  
9.    <mat-divider></mat-divider>  
10.    <h3 mat-subheader>Notes</h3>  
11.    <mat-list-item *ngFor="let note of notes">  
12.       <mat-icon mat-list-icon>note</mat-icon>  
13.       <h4 mat-line>{{note.name}}</h4>  
14.       <p mat-line class="demo-2"> {{note.updated}} </p>  
15.    </mat-list-item>  
16. </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.

1. import { BrowserModule } from '@angular/platform-browser';  
2. import { NgModule } from '@angular/core';  
3. import { AppComponent } from './app.component';  
4. import {BrowserAnimationsModule} from '@angular/platform-browser/animations';  
5. import {MatDividerModule, MatListModule} from '@angular/material'  
6. import {FormsModule, ReactiveFormsModule} from '@angular/forms';  
7. @NgModule({  
8.    declarations: [  
9.       AppComponent  
10.    ],  
11.    imports: [  
12.       BrowserModule,  
13.       BrowserAnimationsModule,  
14.       MatDividerModule, MatListModule,  
15.       FormsModule,  
16.       ReactiveFormsModule  
17.    ],  
18.    providers: [],  
19.    bootstrap: [AppComponent]  
20. })  
21. export class AppModule { }  

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

1. <mat-list>  
2.    <mat-list-item>Apple</mat-list-item>  
3.    <mat-divider></mat-divider>  
4.    <mat-list-item>Orange</mat-list-item>  
5.    <mat-divider></mat-divider>  
6.    <mat-list-item>Banana</mat-list-item>  
7. </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

1. <mat-list>  
2. <mat-list-item>Item 1</mat-list-item>  
3.  <mat-divider></mat-divider>  
4.  <mat-list-item>Item 2</mat-list-item>  
5. <mat-divider></mat-divider>  
6. <mat-list-item>Item 3</mat-list-item>  
7. </mat-list>  

app.component.ts

1. import {Component} from '@angular/core';  
2.   
3. /**  
4. * @title Basic divider  
5.  */  
6. @Component({  
7.   selector: 'divider-overview-example',  
8.  templateUrl: 'divider-overview-example.html',  
9. })  
10. 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

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

Output: