@ssv/ng2-command

@ssv/ng2-command

Deprecated!

Instead use @ssv/ngx.command

Command pattern implementation for angular 2. Command's are used to encapsulate information which is needed to perform an action.

Main purpose usually is to disable a button when an action is executing, or not in a valid state (e.g. busy, invalid) and also to show an activity progress while executing.

In order to contribute please read the Contribution guidelines.

Quick links

Change logs | Project Repository | Contribution guidelines

Installation

Get library via npm

npm install @ssv/ng2-command --save

TypeScript Typings via typings

typings install github:sketch7/ssv-ng2-command --save

Usage

Register module

import { CommandModule } from "@ssv/ng2-command";

@NgModule({
    imports: [
        CommandModule
    ],
    declarations: [
        AppComponent
    ]
}
export class AppModule {
}

Command

In order to start working with Command, you need to create a new instance of it.

import {CommandDirective, Command, ICommand} from "@ssv/ng2-command";

isValid$ = new BehaviorSubject(false);
saveCmd: ICommand = new Command(() => this.save()), this.isValid$);

// usage when execute function returns an observable - NOTE: 3rd argument must be true!
saveCmd: ICommand = new Command(() => Observable.timer(2000), this.isValid$, true);

Command Attribute (Directive)

Handles the command canExecute$, isExecuting and execute functions of the Command, in order to enable/disable, add/remove a cssClass while executing in order alter styling during execution (if desired) and execute when its enabled and clicked.

Generally used on a <button> as below.

Usage

<!-- simple usage -->
<button [command]="saveCmd">Save</button>

<!-- using isExecuting + showing spinner -->
<button [command]="saveCmd">
	<i *ngIf="saveCmd.isExecuting" class="ai-circled ai-indicator ai-dark-spin small"></i>
	Save
</button>

Usage without Attribute

It can also be used as below without the command attribute.

<button
	[disabled]="!saveCmd.canExecute"
	(click)="saveCmd.execute()">
	Save
</button>

Configure

In order to configure globally, you can do so as following:

import { CommandModule } from "@ssv/ng2-command";

    imports: [
        CommandModule.forRoot({ executingCssClass: "is-busy" })
    ],

Getting Started

Setup Machine for Development

Install/setup the following:

• NodeJS v6+
• Visual Studio Code or similar code editor
• TypeScript 2.0+
• Git + SourceTree, SmartGit or similar (optional)
• Ensure to install global NPM modules using the following:

npm install -g git gulp typings karma-cli

Cloning Repo

• Run git clone https://github.com/sketch7/ssv-ng2-command.git
• Switch to develop branch

Project Setup

The following process need to be executed in order to get started.

npm install

Building the code

gulp build

In order to view all other tasks invoke gulp or check the gulp tasks directly.

Running the tests

gulp test

Development utils

Trigger gulp watch

Handles compiling of changes.

gulp watch

Running Continuous Tests

Spawns test runner and keep watching for changes.

gulp tdd

Preparation for Release

gulp prepare-release --bump major|minor|patch|prerelease (default: patch)

Check out the release workflow guide in order to guide you creating a release and publishing it.