Angular Material Components : Divider and Expansion Panel

Manav Pandya  Print 
31 Aug 2018
 
Intermediate
840

In Angular Material, there are multiple components available, from them there is one component of two is Divider which is used to divide content as separation and another component is Expansion panel is used to expand the detailed summary about a single model item. Let’s cover two of the material component in a very detailed manner with appropriate example.

Angular Material Divider Component

Divider component is used to separate lines with the different orientation as per the element we want to separate. There is a two type of possibility to separate line like horizontally or vertically based on the layout we want, we should provide an additional setting parameter to the material divider component. In order to use the material divider component into your application, you can use the selector which described below in a brief manner. Important this is that if you want to use divider component then you should import divider component into a module like this.

Module file

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

And into your module file, include MatDividerModule in import and Export section respectively.

Syntax

To use divider, we can use the selector to include the line in between the text or any other element.

 <mat-divider> … </mat-divider>
 
Example
 
 <p>This is First Line</p>
 <mat-divider></mat-divider>
 <p>This is Second Line</p>
 

As you can see into the above example, that I have used two different lines of text and in between, I have included a divider, so when you run above example you can see the output like this.

If you have noticed that a single line of divider was included in between two lines, so this is how you can use a divider.

Material Divider properties

We have seen the simple divider example, but it also has two different properties which are listed below.

  1. Vertical divider

  2. Inset divider

Vertical Divider

We have covered the basic divider example in which divider will be included horizontally, but if we want to use divider vertically than we can do using property vertical, and it's always a Boolean value.

Syntax

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

Inset Divider

It is the property for the divider, and it decides that whether the divider will be inset or not, and its value will always be the Boolean.

Syntax

 <mat-divider [inset]="true/false" > … <mat-divider >
 
Example
 <p>This is First Line</p>
 <mat-divider [inset]="true"></mat-divider>
 <p>This is Second Line</p>

Here in this example, I have used two different lines of text, with mat-divide and with the selector I have provided an additional property which is called inset when you run the above example, you will get the output like this.

So this is how we can use a divider with different properties, to understand more try the above-given examples.

Angular Material Expansion Panel

Material Expansion Panel component is used to show the detailed summary to the end user. Sometimes we have a different kind of information for a different topic like we have information for personal information section, professional experience section, educational qualification information etc, so to display the initial title for the subject and will display the detailed data by expanding it. In this kind of situation, we can make use of expansion panel to show relevant information by expanding it as per the requirement, for that we have the selector in the angular material to implement the same into our angular single page application. Let’s cover the topic in the very detailed manner.

Syntax

There is a separate selector for expansion panel in angular material, for that we just need to include it in our application like the below syntax.

 <mat-expansion-panel> 
 </mat-expansion-panel>
 

So this is the basic selector, by using this selector we can implement an expansion panel, but with expansion panel, we should have an appropriate header and also may contain an action bar.

In order to work with expansion panel, we should import MatExpansionModule into our module file just like this.

Module file

 import {MatExpansionModule} from '@angular/material/expansion';
 

For that, we will learn different selector that makes expansion panel more presentable in an easy manner, in order to implement we are going to use a few of the selectors which are listed below.

Selector
Description
<mat-expansion-panel>
Used to implement expansion panel
<mat-accordion>
By using accordion, we can group multiple expansion panels
<mat-expansion-panel-header>>
To provide a header to the expansion panel and also acts as a collapse and expand actions
<mat-panel-title>
Provides title to the expanding panel
<mat-panel-description>
It provides the description to the expanding panel
<mat-action-row>
If we want to have an action button then we can provide action row with a panel

Now let’s cover every selector with the basic example, and at the end, we will cover all of the selectors within the single example.

  1. <mat-expansion-panel>

    This is the primary selector which is used to create an expansion panel; inside this selector, we will use all the other selectors to get the complete working expansion panel.

  2. <mat-accordion>

    The material accordion is used to group multiple expansion panels.

    Syntax

     <mat-accordion> … </mat-accordion>
    
  3. <mat-expansion-panel-header>

  4. Material expansion panel header selector is used to provide the header section to the panel which we are going to expand.

    Syntax

     <mat-expansion-panel-header> … </mat-expansion-panel-header>
     
  5. <mat-panel-title>

    This selector is used to provide the title to the expanding panel with an appropriate line of text or a status text.

    Syntax

     <mat-panel-title> … </mat-panel-title>
     
  6. <mat-panel-description>

    In order to provide the relevant information to the end user about the purpose of the panel, than we can use this selector to provide the description.

    Syntax

     <mat-panel-description> … </mat-panel-description>
     
  7. <mat-action-row>

    Sometimes we need to collapse the expansion panel using an action button, so for that, we can use this selection to have separate action row within the panel.

    Syntax

     <mat-action-row> … </mat-action-row>
     

    Here we have covered many selectors which are advisable to use with expansion panel to make expansion panel well presentable, now let’s implement example and you can see the actual usage of all these selectors with expansion panel.

    Example
     <mat-accordion>
     <mat-expansion-panel>
     <mat-expansion-panel-header>
     <mat-panel-title>Panel Title
     </mat-panel-title>
     <mat-panel-description>Panel Description
     </mat-panel-description>
     </mat-expansion-panel-header>
     <p>Content Inside Expaned Panel</p>
     <mat-action-row>
     <button mat-button>Close</button>
     </mat-action-row>
     </mat-expansion-panel>
     </mat-accordion>
    

    As you can see into above that I have used all the selectors what we have discussed previously, try to run above example and you will get output like this.

Before expanding panel

After expanding panel

So you can see the difference by expanding and collapse the expansion panel, this is how we have implemented expansion panel with the all possible selectors, try to play around the code we have covered and created presentable expansion panel by yourself.

Summary

So, in this part of series getting started with angular material, we have covered two component which is Divider component and Expansion panel, as per the situation we can make use of this component to make our single page app presentable, to understand it properly I would suggest you do R&D with above-explained example and learn to create something extraordinary from it, Keep working then.

Hands-on Learning
+