Overview of IntegralUI GroupBox for Angular 2

Created: 10 June 2016

Updated: 24 March 2017

IntegralUI GroupBox is a native Angular 2 component that represents a collapsible panel. It consists of a header and content panel, header displays the group title with and in content panel you can place any other custom HTML elements. In this article, we will give detailed information on what features are included in GroupBox component.

The demonstration above is simple; we have a group box with title and icon displayed in its header and content panel that by default is hidden. Whenever the group header is clicked, the content panel will expand and become visible. Expanding and collapsing of the content panel is accompanied with built-in animations using only CSS.

How to Use IntegralUI GroupBox in Angular 2

In simplest form, the GroupBox component requires only to be set in HTML within your application component.

As you can see from the HTML, for icon we use the name of CSS class that points to an image. As for group title, you only to set the text property to some string value.

Inside content panel, you can place any other component or HTML elements and arrange them in custom layouts. Additionally, all of these elements are customizable from CSS classes set inside your application component template or style sheet.

In our example, we have some input and button elements in the content panel. Whenever the 'Submit' button is clicked, a popup message will appear.

Note The GroupBox component can be included in other Angular Components. For example, IntegralUI Accordion arranges multiple group boxes in horizontal or vertical layout. You can use the GroupBox to create other more advanced components.

In cases where you want to handle events and other scenarios like adding custom expand box in the group header, it requires additional code in Angular. For example, you can create an group box that shows multiple lines of text in the header and a checkbox on the left side. When checked, the group box can become collapsed and disabled.

All properties of the GroupBox component can be set using a separate attribute that is linked to an object in your application scope or a specified value.

Here is a list of available properties:

expanded - determines whether content panel is expanded or collapsed

icon - specifies an icon that is displayed in group header

text - represents the group header title

selected - determines whether group box is selected

Supported Events

Most of actions in the GroupBox are accompanied by events. For example, whenever a GroupBox is expanded or collapsed, expanding and collapsing events are fired.

Here is a list of available events:

afterCollapse - occurs after content panel is collapsed

afterExpand - occurs after content panel is expanded

beforeCollapse - occurs before content panel is collapsed

beforeExpand - occurs before content panel is expanded

selectedChanged - occurs when selected property changes its value

Supported Methods

In current version, there are few methods that you can use to change the state of the GroupBox programmatically from Angular code:

collapse - collapses and hides the content panel of the group box

expand - expands and shows the content panel of the group box

toggle - changes the group box from expanded to collapsed state and vice versa

You can use these methods to either expand or collapse the content panel of the group box, outiside of the component. For example by adding a button that when clicked will toggle the group box between expanded and collapsed state.

// Get a reference to the GroupBox component using a variable set in HTML

@ViewChild('groupbox') groupbox: IntegralUIGroupBox;

constructor(){

}

submitClicked(){

alert("Submit button was clicked.");

}

// Change the state of the GroupBox from expanded to collapsed and vice versa

toggleGroupBox(){

this.groupbox.toggle();

}

}

//

// app.template.html file

//

<button(click)="toggleGroupBox()">Toggle</button>

<divclass="sample-container"#groupbox>

<iui-groupboxtext="Login"icon="user">

<divclass="group-content">

<span>User name:</span><inputtype="text" /><br/>

<span>Password:</span><inputtype="password" /><br/>

<button(click)="submitClicked()">Submit</button>

</div>

</iui-groupbox>

</div>

In order to access these methods, at first we need to get a reference to the GroupBox component. In HTML we are adding the #groupbox variable, which is used to locate the GroupBox within your application component.

After we have a reference to the GroupBox component, we can call any of public methods available, in your application code.

Note You can also use this reference to subscribe to some or all available events. This allows you to set event handlers from your code, instead of setting the event attributes in HTML.

How to Customize the GroupBox Appearance

The GroupBox consists of header and content panel. There are several CSS classes that governs the layout and appearance of these parts. By modifying the attributes of built-in CSS classes, you can alter the appearance of the GroupBox in whole.

Additionally, you can set your own CSS classes in your app component, for custom content added in the group header and content panel.

To animate the expanding and collapsing of the content panel, we are using only CSS. The speed and type of animation used can be changed by overriding the built-in CSS classes. Further versions of this component will include options to add custom animations.

Conclusion

This is a brief introduction to the IntegralUI GroupBox for Angular 2, showing only basic features.

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.