LIDOR SYSTEMS

Advanced User Interface Controls and Components

Overview of IntegralUI Range for Angular 2

Created: 15 July 2016

Updated: 24 March 2017

IntegralUI Range is a native Angular 2 directive that allows you to set minimum and maximum width and height of HTML element or other Angular components. In addition, element size can change whenever its parent, page or window is resized. This allows you to resize automatically elements during run-time, which are related to other elements or the document in whole.

Range directive is part of IntegralUI Web
a suite of UI Components for development of web apps

In above demo we have a small form with some labels and input elements. The form has a frame directive attached, which allows to change its size by simply clicking and dragging the resize marker, placed on the bottom-right of the form. Whenever the form is resized, the input elements will extend or decrease its size, while still keeping the whole structure in order.

How to Use IntegralUI Range in Angular 2

To use the Range directive, you only need to attach the iuiRange attribute to some HTML element or Angular 2 component. Next, you need to set up the behavior of the directive by applying an object that holds the following properties:

  • anchor - specifies to which side the element will expand or shrink its size
  • height - specifies the initial height of the element, in percents or pixels
  • maxHeight - determines the maximum height the element can have
  • maxWidth - determines the maximum width the element can have
  • minHeight - determines the minimum height the element can have
  • minWidth - determines the minimum width the element can have
  • ref - specifies whether the element size changes are related to: parent, page or window
  • resizeFactor - specifies the amount by which the anchored element will resize
  • width - specifies the initial width of the element, in percents or pixels

All above properties are optional, and you can create an object that specifies only a few of them. The only requirement is the ref field, that determines how the element will resize, in relation to other elements or window itself. For example:

//

// main.ts file

//

 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

 

const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule);

 

 

 

//

// app.module.ts file

//

 

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { IntegralUIModule } from 'integralui/integralui.module';

 

@NgModule({

imports: [ BrowserModule, FormsModule, IntegralUIModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

 

 

 

//

// app.component.ts file

//

 

import { Component } from '@angular/core';

import { IntegralUIAnchorStyle } from 'integralui/components/integralui.core';

 

@Component({

selector: 'iui-app',

templateUrl: 'app.template.html',

styleUrls: ['range-overview.css']

})

export class AppComponent {

private rangeSettings = {

anchor: IntegralUIAnchorStyle.right,

resizeFactor: 0.5,

minWidth: 75,

maxWidth: 250,

ref: 'parent'

}

 

private rangeSettingsSubject = {

anchor: IntegralUIAnchorStyle.right,

resizeFactor: 1,

minWidth: 250,

maxWidth: 600,

ref: 'parent'

}

 

private rangeSettingsMessage = {

anchor: IntegralUIAnchorStyle.right | IntegralUIAnchorStyle.bottom,

resizeFactor: 1,

minHeight: 50,

minWidth: 250,

maxHeight: 200,

maxWidth: 600,

ref: 'parent'

}

 

private user: any = {

firstName: '',

lastName: '',

email: '',

phone: '',

subject: ''

}

 

constructor(){

}

}

 

bootstrap(AppComponent);

//

// app.template.html file

//

 

<div class="container" iuiFrame>

<label>First Name:</label><input [(ngModel)]="user.firstName" [iuiRange]="rangeSettings" />

<label>Last Name:</label><input [(ngModel)]="user.lastName" [iuiRange]="rangeSettings" />

<br/>

<label>E-mail:</label><input [(ngModel)]="user.email" [iuiRange]="rangeSettings" />

<label>Phone:</label><input [(ngModel)]="user.phone" [iuiRange]="rangeSettings" />

<br/>

<label>Subject:</label><input [(ngModel)]="user.subject" [iuiRange]="rangeSettingsSubject" style="width:450px" />

<br/><br/>

<label style="vertical-align: top;">Message:</label><textarea rows="4" cols="50" [(ngModel)]="user.message" [iuiRange]="rangeSettingsMessage"></textarea>

<br/><br/><br/>

<button class="btn-submit">Submit</button>

</div>

/*

range-overview.css file

*/

.container

{

background: #f5f5f5;

border: thin solid #bcbcbc;

overflow: hidden;

padding: 10px 10px 20px 10px;

position: relative;

width: 550px;

white-space: nowrap;

 

min-width: 360px;

max-width: 700px;

min-height: 300px;

max-height: 450px;

 

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-o-user-select: none;

-ms-user-select: none;

user-select: none;

}

label

{

display: inline-block;

margin: 10px;

width: 80px;

text-align: right;

}

textarea

{

resize: none;

width: 450px;

height: 100px;

}

.btn-submit

{

margin-left: 100px;

padding: 5px;

width: 75px;

}

How to Anchor Elements

In this example, the input elements are anchored and will change their width based on the width of the form. Whenever the form is resized (using a frame), these elements will grow or shrink its width and/or height. In this way, the form structure will remain in same format.

Top input elements are anchored to the right side, which means whenever the form changes its width, these elements will also change its width to fill the remaining space. In this case the resizeFactor field is set to 0.5, because there are two anchored elements in the same line.

The textarea element is anchored on right and bottom side, so that whenever the form changes its width and height, the text area will expand or shrink. Here, the resizeFactor is set to 1, because only this element is anchored in the same line of the form, horizontal and vertical.

private rangeSettings = {

anchor: IntegralUIAnchorStyles.right,

resizeFactor: 0.5,

minWidth: 75,

maxWidth: 250,

ref: 'parent'

}

The following anchor values are acceptable:

  • none - the element is not anchored
  • top - element is anchored to the top side
  • right - element is anchored to the right side
  • bottom - element is anchored to the bottom side
  • left - element is anchored to the left side

In addition, the form has its CSS attributes set, the min-width, max-width, min-height and max-height, so that it can be resize within these limits.

Note Of course, you can do this by simply using CSS settings for the elements and set their width in percentages. However, by using the Range directive you have more control on how and when you want to change the element size. Additionally, anchoring is not available from CSS.

Related: How to Change Element Size using a Frame

As you may notice in the code, the ref field is set to 'parent'. This notifies the Range directive that element will change its size based on changes to its immediate parent element. If this field is set to a 'window' value, then whenever the window is resized, an element with range directive attached, will also resize.

In some cases, you may want to limit the width or height to which the element should resize. As it is demonstrated, by setting the minWidth to 100 pixels, the input elements can only have minimum width of 100 pixels, after which changes will stop.

Setting values in percents, allows you to change the element width or height based on percentage of total width or height of related element or window.

Supported Events

Currently only one event is supported:

  • sizeChanged - occurs when element size changes

Whenever an element is resized, the sizeChanged event is fired. You can handle this event in your code and add custom functionality. The element new width and height are carried with the event.

To subscribe to this event, apply the sizeChanged name to HTML element next to the iuiRange attribute. Then add a function in your app code that will act as an event handler:

//

// app.component.ts file

//

 

export class AppComponent {

elemSizeChanged(e){

console.log("New element size: { " + e.width + "px, " + e.height + "px }");

}

}

//

// app.template.html file

//

 

<label>First Name:</label><input [(ngModel)]="user.firstName" [iuiRange]="rangeSettings" (sizeChanged)="elemSizeChanged($event)" />

Conclusion

IntegralUI Range is a native Angular 2 directive that is attachable to any HTML element or other components. It allows you to set how the element size will change during run-time, based on changes to its parent element, page or window.

The Range component is part of IntegralUI Web.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.