September 18, 2016

Angular Material Divider

Angular Material Divider: <mdDivider> directive is used to create divider in Angular Material. The Divider is basically a thin line to make a separation between the contents. Here in this tutorial we are going to explain how you can create divider in Angular Material Using the <mdDivider> directive. You can also use our online editor to edit and run the code online.

Angular Material Divider Example

Let us create a simple divider using the <mdDivider> directive-

Angular Material Divider | Example:

 <md-content>
    <md-list>
      <md-list-item class="md-3-line">
        <div class="md-list-item-text">
          <h3>You enjoyed this weekend?</h3>
          <h4>John</h4>
          <p>Yes i enjoyed it very much.</p>
        </div>
        <md-button class="md-secondary">Reply</md-button>
        <md-divider></md-divider>
      </md-list-item>
      <md-list-item class="md-3-line">
        <div class="md-list-item-text">
          <h3>What you did?</h3>
          <h4>John</h4>
          <p>I went on short trip.</p>
        </div>
        <md-button class="md-secondary">Reply</md-button>
        <md-divider></md-divider>
      </md-list-item>
      <md-list-item class="md-3-line">
        <div class="md-list-item-text">
          <h3>What is your plan for next week?</h3>
          <h4>John</h4>
          <p>I have not decided yet.</p>
        </div>
        <md-button class="md-secondary">Reply</md-button>
      </md-list-item>
    </md-list>
  </md-content>

Try it »

In the above example we have created a simple list and added divider to them. If you run the above example it will produce the output something like this –

Attributes

Following attribute is available for dividers-

md-inset:This attribute is used to activate the inset style divider.

Learn More

Let us have some example and demo about the Angular Material Dividers.

md-inset – Inset Divider Example

You can create inset style divider using the attribute md-inset. Here is an example-

| Example:

<md-content>
    <md-list>
      <md-list-item class="md-3-line">
        <img ng-src="myImg.jpg" class="md-avatar" >
        <div class="md-list-item-text">
          <h3>You enjoyed this weekend?</h3>
          <h4>John</h4>
          <p>Yes i enjoyed it very much.</p>
        </div>
        <md-button class="md-secondary">Reply</md-button>
        <md-divider md-inset></md-divider>
      </md-list-item>
      <md-list-item class="md-3-line">
         <img ng-src="myImg.jpg" class="md-avatar" >
        <div class="md-list-item-text">
          <h3>What you did?</h3>
          <h4>John</h4>
          <p>I went on short trip.</p>
        </div>
        <md-button class="md-secondary">Reply</md-button>
        <md-divider md-inset></md-divider>
      </md-list-item>
      <md-list-item class="md-3-line">
        <img ng-src="myImg.jpg" class="md-avatar" >
        <div class="md-list-item-text">
          <h3>What is your plan for next week?</h3>
          <h4>John</h4>
          <p>I have not decided yet.</p>
        </div>
        <md-button class="md-secondary">Reply</md-button>
      </md-list-item>
    </md-list>
  </md-content>

Try it »

If you run the above example it will produce output something like this –

Add Comment

📖 Read More

angular material tutorial

Angular Material Divider