Expansion Panel In Angular Using Ignite-ui-angular

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?

1. Installation of Ignite UI for Angular
2. Creating an Angular Project with Ignite UI
3. Importing the IgxExpansionPanelModule
4. Adding the igx-expansion-panel-page component
5. Adding the igx-expansion-panel
6. Binding property and events
7. Styling the header
8. 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.

Listing 1.

Now, we have configured Ignite UI with our Angular project successfully.

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

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

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.

Listing 4.

Add the following CSS in “expansion-panel-page.component.css” under the components directory.

Listing 5.

Now, run the application using “ng server --open” command.

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.

Listing 6.

In the “expansion-panel-page.component.html”, add these lines.

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.

Listing 8.

Now, bind the above events in HTML for onExpanded and onCollapsed events.

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

Set header in the right position

Listing 10.

Add the following CSS code to the “expansion-panel-page.component.css” file for proper positions.

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.

1. Personal Information
2. Billing Address
3. Shipping Address

Add the three expansion panels.