Ignite-UI’s Angular expansion panel, IgxExpansionPanel, is very useful in situations when we need to show lots of things and we have limited space in a web application, especially in mobile-based applications because mobiles have comparatively small screens to render controls.
The IgxExpansionPanel is a lightweight component which can be rendered in two states - collapsed or expanded. When collapsed, the panel displays a short summary of its contents. The collapsed panel can be toggled using mouse click or keyboard interactions to display the body completely, containing any additional necessary content.
Ignite UI Angular provides an expansion panel which is user-friendly and responsive so that it can adjust to the screen layout accordingly.
What we will cover in this article?
- Installation of Ignite UI for Angular
- Creating an Angular Project with Ignite UI
- Importing the IgxExpansionPanelModule
- Adding the igx-expansion-panel-page component
- Adding the igx-expansion-panel
- Binding property and events
- Styling the header
- Conclusion
Installing Ignite UI for Angular
You should have node and npm installed on your machine. If you are new to npm, check out the npm documentation here, otherwise open the command prompt and run
“npm install -g igniteui-cli”
Create an Angular project with Ignite UI
To create a new project, run the below command.
“ng new expansion-panel-angular-demo”
To get into the project, use this command.
“cdexpansion-panel-angular-demo”
Now, it’s time to install the Ignite UI for this project. Run the following command.
“npm install igniteui-angular”
Let’s add the required Ignite UI styles and the “HammerJs” library to the angular-cli.json file.
Open the “angular.json” file and add the code snippet as shown in Listing 1.
- "styles": ["../node_modules/igniteui-angular/styles/igniteui-angular.css"]
- "scripts": ["../node_modules/hammerjs/hammer.min.js"]
Listing 1.
Now, we have configured Ignite UI with our Angular project successfully.
Adding Material Icons
-
- @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
Listing 2.
Run the following command on command prompt to execute the Angular application.
ng serve --open
The application will run using the following address and port - “http://localhost:4200”
Import the IgxExpansionPanelModule
Open the “app.module.ts” file and import the IgxDatePickerModule in the import section of @NgModule.
- import {
- IgxExpansionPanelModule
- } from 'igniteui-angular';
- @NgModule({
- imports: [
- IgxExpansionPanelModule
- ],
- providers: [],
- bootstrap: [AppComponent]
- })
- export class AppModule {}
Listing 3.
Add the igx-expansion-panel-page component
Let’s add a new component named igx-expansion-panel-page. To do that, run the below command on command prompt.
ng generate component components/igx-expansion-panel-pag
Figure 1.
Now, add the <app-date-picker-page></app-date-picker-page> tag in app.component.html file.
Adding the <igx-expansion-panel>
Let’s add the <igx-expansion-panel> directive in “date-picker-page.component.html” page, as showing in listing 4.
- <igx-expansion-panel>
- <igx-expansion-panel-header>
- <igx-expansion-panel-title> Avengers: Endgame </igx-expansion-panel-title>
- <igx-expansion-panel-description> Avengers: Endgame is an upcoming American superhero film. </igx-expansion-panel-description>
- </igx-expansion-panel-header>
- <igx-expansion-panel-body>
- <p>The film was announced in October 2014 as Avengers Infinity War Part 2. The Russo brothers came on board to direct in April 2015, and by May, Markus and McFeely signed on to script the film. In July 2016, Marvel removed the films title, referring to it simply as Untitled Avengers film. Filming began in August 2017 at Pinewood Atlanta Studios in Fayette County, Georgia, shooting back-to-back with Avengers Infinity War, and ended in January 2018. Additional filming took place in the Downtown and Metro Atlanta areas. The title, Avengers Endgame, was officially revealed in December 2018.</p>
- </igx-expansion-panel-body>
- </igx-expansion-panel>
Listing 4.
Add the following CSS in “expansion-panel-page.component.css” under the components directory.
- .igx - expansion - panel {
- font - family: Verdana;
- margin: 24 px;
- width: 420 px;
- box - shadow: 0 1 px 5 px 0 rgba(0, 0, 0, .26), 0 2 px 2 px 0 rgba(0, 0, 0, .12), 0 3 px 1 px - 2 px rgba(0, 0, 0, .08);
- }.igx - expansion - panel__header--expanded {
- border - bottom: 1 px dashed rgba(0, 0, 0, .74);
- }.igx - expansion - panel__body > * {
- padding: 8 px 16 px;
- }
Listing 5.
Now, run the application using “ng server --open” command.
Figure 2.
Binding Property and Events
Let’s see how to bind properties in the expansion panel. In the “expansion-panel-page.component.ts”, add the following code.
- import {
- Component,
- ViewChild
- } from '@angular/core';
- import {
- IgxExpansionPanelComponent
- } from 'igniteui-angular';
- @Component({
- selector: 'app-expansion-panel-page',
- templateUrl: './expansion-panel-page.component.html',
- styleUrls: ['./expansion-panel-page.component.css']
- })
- export class ExpansionPanelPageComponent {
- @ViewChild(IgxExpansionPanelComponent, {
- read: IgxExpansionPanelComponent
- })
- public panel: IgxExpansionPanelComponent;
- public readMore: string;
- constructor() {
- this.readMore = 'https://en.wikipedia.org/wiki/Avengers:_Endgame';
- }
- }
Listing 6.
In the “expansion-panel-page.component.html”, add these lines.
- <igx-expansion-panel-body>
- <p>The film was announced in October 2014 as Avengers Infinity War Part 2. . . . </p>
- <a [href]="readMore" target="_blank">Read more</a>
- </igx-expansion-panel-body>
Listing 7.
To bind the events
To bind the event, add two events in “ExpansionPanelPageComponent ” page - one is for expansion and the other one is for collapse, as shown in Listing 8.
- export class ExpansionPanelPageComponent {
- public handleExpansion(evt ? : {
- event: Event
- }) {
- alert('Expanded Event Fired!');
- }
- public handleCollapse(evt ? : {
- event: Event
- }) {
- alert('Collapsed Event Fired!');
- }
- }
Listing 8.
Now, bind the above events in HTML for onExpanded and onCollapsed events.
- <igx-expansion-panel (onExpanded)="handleExpansion($event)" (onCollapsed)="handleCollapse($event)">
- </igx-expansion-panel>
Listing 9.
Styling the Header
We can also set the styling in the header of the expansion panel. We can either set it on the left position or the right position.
Set header in the left position
- <igx-expansion-panel-header [iconPosition]="'left'">
Figure 3.
Set header in the right position
- <igx-expansion-panel-header [iconPosition]="right">
Figure 4.
- <igx-expansion-panel-header [iconPosition]="'left'">
- <igx-expansion-panel-title> Avengers: Endgame </igx-expansion-panel-title>
- <igx-expansion-panel-description *ngIf="panel.collapsed"> Avengers: Endgame is an upcoming American superhero film. </igx-expansion-panel-description>
- <igx-expansion-panel-icon>
- <span class="example-icon" *ngIf="panel.collapsed">Show more</span>
- <span class="example-icon" *ngIf="!panel.collapsed">Collapse</span>
- </igx-expansion-panel-icon>
- </igx-expansion-panel-header>
Listing 10.
Add the following CSS code to the “expansion-panel-page.component.css” file for proper positions.
- .example - icon {
- font - size: 12 px;
- font - weight: 600;
- text - shadow: 1 px #000;
-
- }
Listing 11.
Creating a registration page using expansion panel
Let’s create a registration page using the expansion panel. This UI will have 3 panels.
- Personal Information
- Billing Address
- Shipping Address
Add the three expansion panels.
The first one is for personal information that will have the control for full name, phone number, and email; the second expansion panel will have controls for billing address; and the last one is for shipping address.
Listing 12.
- import {
- Component,
- ViewChildren,
- QueryList
- } from '@angular/core';
- import {
- IgxExpansionPanelComponent,
- IExpansionPanelEventArgs,
- } from 'igniteui-angular';
- import {
- useAnimation
- } from '@angular/animations';
- @Component({
- selector: 'app-expansion-panel-registration',
- templateUrl: './expansion-panel-registration.component.html',
- styleUrls: ['./expansion-panel-registration.component.css']
- })
- export class ExpansionPanelRegistrationComponent {
- @ViewChildren(IgxExpansionPanelComponent)
- public accordion: QueryList < IgxExpansionPanelComponent > ;
- public user = {
- email: '',
- fullName: '',
- phone: ''
- };
- public billingAddress = {
- address: '',
- city: '',
- state: '',
- zipCode: ''
- };
- public shippingAddress = {
- address: '',
- city: '',
- state: '',
- zipCode: ''
- };
- public collapsed(index: number) {
- if (!this.accordion) {
- return true;
- }
- return this.accordion.toArray()[index] && this.accordion.toArray()[index].collapsed;
- }
- public onInteraction(event: IExpansionPanelEventArgs) {
- const expandedPanels = this.accordion.filter((panel) => !panel.collapsed);
- expandedPanels.forEach((expandedPanel) => {
- if (expandedPanel.id !== event.panel.id) {
- expandedPanel.collapse();
- }
- });
- }
- }
Listing 13.
Figure 5.
Figure 6.
Figure 7.
Conclusion
Expansion panel (IgxExpansionPanelModule) is a light-weight component that provides two features - expand and collapse. It helps the web developers to achieve a functionality in which a user needs to show some content on the control expansion and later, it can be hidden to render other controls.
To learn more, download a free trial and get started here.