Overview of IntegralUI Button for Angular

Created: 18 Nov 2019

IntegralUI Button is a native Angular component that represents a button. It is fully customizable with all basic functionalities of a standard button. In this article, you will find general information about the button component, including its properties, events and methods that you can use.

Button component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

The button component can work as a normal button or in a group with other buttons like the ones presented in this example. There are three buttons aligned next to each other forming a button group. When button is hovered its state is animated appearing above other buttons. When clicked, the button appears in different colors stating that it is pressed.

How to Use IntegralUI Button in Angular

To use the Button component you need to do the following:

  • In app template place the button component using the iui-button tag name
  • Set values for different properties available
  • Handle the click event in your code
<div class="app-block" #application>
    <div class="btn-ovw-container">
        <iui-button [allowAnimation]="true" [controlStyle]="ctrlStyle2" [pressed]="isButtonPressed[0]" (click)="onButtonClicked(0)">Button 1</iui-button>
        <iui-button [allowAnimation]="true" [controlStyle]="ctrlStyle" [pressed]="isButtonPressed[1]" (click)="onButtonClicked(1)">Button 2</iui-button>
        <iui-button [allowAnimation]="true" [controlStyle]="ctrlStyle3" [pressed]="isButtonPressed[2]" (click)="onButtonClicked(2)">Button 3</iui-button>

By default, button component is not pressed and behave like the standard button element. However, using the pressed property you can have a button that will appear in pressed or normal state when clicked. As demo shows, this is useful with multiple buttons aligned next to each other, when you need to visually present an option that is active. For example, stating the current text alignment in use, like in Microsoft Word.

Button as Part of Other Angular Components

Button component is also usable as part of other components. For example, you can add a button to the cells in the Grid or TreeGrid component. Simply, place the button in the cell template, and when grid updates it will show the button inside the specified cell.

<iui-grid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" [rowHeight]="25" #grid>
    <ng-template let-column [iuiTemplate]="{ type: 'header' }">
        <span *ngIf="column.id==9" class="cell-checkbox" [ngStyle]="{ 'background-image': getCheckValue(column) }" (mousedown)="columnCheckClicked(column)"></span>
    <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
        <div [ngSwitch]="cell.cid">
            <div *ngSwitchCase="7" class="button-cell">
                <iui-button (mousedown)="deleteRow(cell.rid)">Delete</iui-button>
            <div *ngSwitchDefault>
                <span class="grid-ctpl-item-label">{{cell.text}}</span>

You can also use the button component in Angular Forms.

List of Available Properties, Events and Methods in IntegralUI Button

Supported Properties

You can use the following properties to change the appearance and behavior of the Button component:

  • allowAnimation - determines whether changes to the button are animated or not
  • controlStyle - specifies an object that contains all style settings for the component
  • data - specifies an object that holds data related to the component
  • enabled - determines whether the component is enabled or disabled
  • name - uniquely identifies the component
  • pressed - specifies whether Button is pressed or not: true or false
  • size - specifies the component width and height
  • state - specifies the component state: disabled, hovered, etc.

Using the above properties, you can customize the Button component in a way best suited for your application.

Supported Events

Here is a list of available events:

  • click - occurs when component is clicked
  • enabledChanged - occurs when component is enabled or disabled
  • pressedChanged - occurs when pressed property value changes
  • stateChanged - occurs when component state changed: disabled, normal, hovered, selected

The pressedChanged event is fired, whenever the value of pressed property changes. For example, by handling the click event, you can toggle the pressed state from active or inactive (true or false). When button is pressed, it will appear in different colors representing that it is selected.

This is useful when you have multiple buttons, and you want to show which buttons are pressed, as it is shown in above demo:

public isButtonPressed: Array = [ false, false, false ];

onButtonClicked(index: number){
    if (index >= 0 && index < this.isButtonPressed.length)
        this.isButtonPressed[index] = !this.isButtonPressed[index];
<div class="app-block" #application>
    <div class="btn-ovw-container">
        <iui-button [allowAnimation]="true" [controlStyle]="ctrlStyle2" [pressed]="isButtonPressed[0]" (click)="onButtonClicked(0)">Button 1</iui-button>
        <iui-button [allowAnimation]="true" [controlStyle]="ctrlStyle" [pressed]="isButtonPressed[1]" (click)="onButtonClicked(1)">Button 2</iui-button>
        <iui-button [allowAnimation]="true" [controlStyle]="ctrlStyle3" [pressed]="isButtonPressed[2]" (click)="onButtonClicked(2)">Button 3</iui-button>

Supported Methods

The following public methods are available:

  • refresh - updates the component appearance

How to Customize the Button Appearance

You can modify the button appearance by changing the attributes of several built-in CSS classes. By default button appears in gray colors, and if a theme is applied in colors from the active theme.

However, you can further enhance the button by adding your own custom CSS classes that will override the default appearance.

For this purpose, you can use the controlStyle property, where you need to specify the names of your CSS classes, for button state that you want to change: disabled, focused, hovered, normal and selected:

public ctrlStyle: any = {
    general: { 
        normal: 'btn-ovw',
<iui-button [allowAnimation]="true" [controlStyle]="ctrlStyle" [pressed]="isButtonPressed[1]" (click)="onButtonClicked(1)">Button 1</iui-button>
    border-radius: 0;
    display: inline-block;
    padding: 10px;
    margin-right: -5px;

To disable animations of the button state, you can simply set the allowAnimation property to false.


IntegralUI Button component for Angular replaces the standard button element. Using different properties and events and by providing your own CSS classes, you can customize the button appearance and behavior. Button can also appear as pressed or not, stating that some option or process is active or inactive. The button is also compatible with Angular Forms and can be used as part of it.

The Button component is part of IntegralUI Web.


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.