Angular Step Input Directive

Angular Step Input Directive

Angular Step Input Directive for a customized numeric user inputs.A custom user input extracted from our inhouse framework/cms. The input is somewhat similar to a native number-input, but it allows for default styling and custom styling overrides for specified numbers.

Features of Angular Step Input Directive:

  • styled number input
  • min/max values
  • custom increment/decrement icons
  • override view value as function or expression (eg to represent 0 by an x-icon)
  • all overrides on a per value basis (eg display 0 in red)

Getting Started

  1. Install with bower: bower install --save angular-step-input
  2. Include angular-step-input.js.
  3. Add tien.stepInput to you app modules.
  4. Use the tien-step-input directive.

If you don’t like package managers, you can also directly download angular-step-input.js or angular-step-input.min.js.


1. Out-of-the-box

$scope.demo = 1

2. Custom icons and style

$scope.demo = 2

3. Specific step settings

$scope.demo = 3

4. View value as a function



$scope.demo = 4

5. View value as an expression




$scope.demo = 5

6. Availability example




$scope.available = 2

Build a simple attribute directive

An attribute directive minimally requires building a controller class annotated with @Directive, which specifies the selector that identifies the attribute. The controller class implements the desired directive behavior.

This page demonstrates building a simple appHighlight attribute directive to set an element’s background color when the user hovers over that element. You can apply it like this:

src/app/app.component.html (applied)
<p appHighlight>Highlight me!</p>

Please note that directives do not support namespaces.

src/app/app.component.avoid.html (unsupported)
<p app:Highlight>This is invalid</p>

Write the directive code

Create the directive class file in a terminal window with the CLI command ng generate directive.

The CLI creates src/app/highlight.directive.ts, a corresponding test file src/app/highlight.directive.spec.ts, and declares the directive class in the root AppModule.

Directives must be declared in Angular Modules in the same manner as components.

The generated src/app/highlight.directive.ts is as follows:

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

  selector: '[appHighlight]'
export class HighlightDirective {
  constructor() { }

The imported Directive symbol provides Angular the @Directive decorator.

The @Directive decorator’s lone configuration property specifies the directive’s CSS attribute selector, [appHighlight].

It’s the brackets ([]) that make it an attribute selector. Angular locates each element in the template that has an attribute named appHighlight and applies the logic of this directive to that element.


Use the tien-step-input directive as element or attribute. Add the ng-model directive to bind an integer. Optionally pass through a custom options object width the step-input-options attribute.

<tien-step-input ng-model="foo" step-input-options="my_options"></tien-input-step>
    $scope.options = {
        min_value: -1,
        overrides: [
            {value: -1, style: 'danger', view_value: '<i class="fa fa-times"></i>'},
            {value: 0, style: 'warning', view_value: '<i class="fa fa-question"></i>'}



Type: String
Default: fa fa-minus

CSS classes to add to the icon on the decrease button. By default FontAwesome icons are used.


Type: String
Default: fa fa-plus

CSS classes to add to the icon on the increase button. By default FontAwesome icons are used.


Type: Integer
Default: 0

Minimum value of the field, negative integers allowed.


Type: Integer
Default: 999

Maximum value of the field, negative integers allowed.


Type: String
Default: primary

CSS classes applied to the container element of the directive. The default stylesheet provides all Bootstrap color classes (primarysuccessinfo,warningdanger). The [sass-src file]() includes a mixin to easily add custom colors.

Apply the attribute directive

To use the new HighlightDirective, add a paragraph (<p>) element to the template of the root App Component and apply the directive as an attribute.


Now run the application to see the HighlightDirective in action.

To summarize, Angular found the appHighlight attribute on the host <p> element. It created an instance of the HighlightDirective class and injected a reference to the <p> element into the directive’s constructor which sets the <p> element’s background style to yellow.


Type: Function | Expression | Boolean
Default: false

By default (false) the input displays the current integer-value in a regular input element. With the view_value option it is possible to alter this representation with a function (demo 4) or angular expression (demo 5) that returns an HTML-string.

Bind to a second property

This highlight directive has a single customizable property. In a real app, it may need more.

At the moment, the default color—the color that prevails until the user picks a highlight color—is hard-coded as “red”. Let the template developer set the default color.

Add a second input property to HighlightDirective called defaultColor:

src/app/highlight.directive.ts (defaultColor)


Type: Array
Default: []

This Array overrides options based on specific input values. Each array element has to be an Object with at least the value-property. All options mentioned above are available. See demo 3 & 6.

It may be difficult to imagine how this directive actually works. In this section, you’ll turn AppComponent into a harness that lets you pick the highlight color with a radio button and bind your color choice to the directive.

Update app.component.html as follows:

src/app/app.component.html (v2)
<h1>My First Attribute Directive</h1>

<h4>Pick a highlight color</h4>
  <input type="radio" name="colors" (click)="color='lightgreen'">Green
  <input type="radio" name="colors" (click)="color='yellow'">Yellow
  <input type="radio" name="colors" (click)="color='cyan'">Cyan
<p [appHighlight]="color">Highlight me!</p>

For More Angular Jquery Plugins Click

Leave a Reply

Your email address will not be published. Required fields are marked *