@ssv/ng2-command v0.2.1
@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.