Angular accordion example

Suggested Videos
Part 58 - Passing data between components in angular | Text | Slides
Part 59 - Edit form in angular | Text | Slides
Part 60 - Angular delete form | Text | Slides

In this video we will discuss 

• How to implement simple accordion type of functionality in Angular
• Difference between ngIf directive and hidden property in Angular 2 and later versions

Implementing accordion type of functionality in Angular 2 and later versions : When the panel title is clicked, the panel body and the footer must be collapsed. Clicking on the panel title again, must expand the collapsed panel body and footer.




There are several ways to do this. One way is to implement this accordion functionality in the component itself where we need it. For example, in our case the display logic for the employee is present in DisplayEmployeeComponent. So we include accordion functionality also in the DisplayEmployeeComponent. 

The benefit of this approach is, it is very easy to implement. The downside is, we cannot reuse this accordion functionality in another component if we need it there. We have to re-implement this same functionality again in that component. 

In our next video we will discuss how to extract common accordion functionality into a separate component using content projection, so it can be reused anywhere in the application where we need that accordion type of functionality.

In this video let's implement accordion functionality in the DisplayEmployeeComponent itself.

Changes in display-employee.component.ts : Include the following panelExpanded boolean property in the component class. Notice we have initialised it to true, so the employee panel is expanded by default when the page first loads.

panelExpanded = true;

Changes in display-employee.component.css : Include the following "pointerCursor" class to make the cursor, a pointer when hovered over panel title, so the end user knows, it is clickable.

.pointerCursor {

    cursor: pointer;

}

Changes in display-employee.component.html : To show and hide panel body and footer, we are using ngIf structural directive. ngIf removes the element from the DOM completely when the condition is false and adds the element back once the condition becomes true. So every time, we click the panel title, the panel body and footer are either added to the DOM or removed from the DOM depending on whether the condition is true or false. 

<div class="panel panel-primary"

     [class.panel-success]="selectedEmployeeId === employee.id">

    <!-- pointerCursor class changes the cursor style to pointer when hovered over 
          the employee panel title. When clicked on the title, the panelExpanded 
          boolean property is toggled from true to false & vice-versa. We use this 
          property to toggle the visibility of panel body & footer -->

    <div class="panel-heading pointerCursor"

                        (click)="panelExpanded = !panelExpanded">

        <h3 class="panel-title">{{employee.name | uppercase}}</h3>

    </div>

    <!-- Render panel-body <div> only if panelExpanded property is true  -->

    <div class="panel-body" *ngIf="panelExpanded">

        <!-- Rest of the HTML -->

    </div>

    <!-- Render panel-footer <div> only if panelExpanded property is true  -->

    <div class="panel-footer" *ngIf="panelExpanded">

        <!-- Rest of the HTML -->

    </div>

</div>

In our case, the user of the application may toggle the visibility several times. So from a performance standpoint, it is better to show and hide the panel body and footer, rather than removing from the DOM and adding them back again when the condition is true. To show and hide we use the hidden property as shown below.

<div class="panel-body" [hidden]="!panelExpanded">

    <!-- Rest of the HTML -->

</div>

<div class="panel-footer" [hidden]="!panelExpanded">

    <!-- Rest of the HTML -->

</div>

ngIf vs hidden in Angular

• ngIf adds or removes element from the DOM where as hidden property hides and shows the element by adding and removing display: none style. 
• If you frequently toggle the visibility of an element, it is better to use hidden property from a performance standpoint
• If you know you will not need to show an element, then ngIf is better. For example, you are logged in as a NON-Administrator and there is a report component on the page that should be displayed only to the Administrators. Since you are logged in as a NON-Administrator, using ngIf to hide the report component is better from  a performance standpoint. Since ngIf does not add the element to the DOM, it also does not execute the code associated with that report component. If you use hidden property instead, the report component will be constructed, all it's associated code is executed, the component is added to the DOM, and to keep it hidden from the non-administrator it uses display:none style. So in short, if you frequently toggle the visibility of an element, it is better to use hidden property. On the other hand, if you know the element will remain hidden and the user does not have the ability to toggle the visibility, then use ngIf structural directive.