Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
@ssv/ng2-command
Advanced tools
Readme
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
Get library via npm
npm install @ssv/ng2-command --save
TypeScript Typings via typings
typings install github:sketch7/ssv-ng2-command --save
import { CommandModule } from "@ssv/ng2-command";
@NgModule({
imports: [
CommandModule
],
declarations: [
AppComponent
]
}
export class AppModule {
}
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);
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.
<!-- 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>
It can also be used as below without the command attribute.
<button
[disabled]="!saveCmd.canExecute"
(click)="saveCmd.execute()">
Save
</button>
In order to configure globally, you can do so as following:
import { CommandModule } from "@ssv/ng2-command";
imports: [
CommandModule.forRoot({ executingCssClass: "is-busy" })
],
Install/setup the following:
npm install -g git gulp typings karma-cli
git clone https://github.com/sketch7/ssv-ng2-command.git
develop
branchThe following process need to be executed in order to get started.
npm install
gulp build
In order to view all other tasks invoke gulp
or check the gulp tasks directly.
gulp test
Handles compiling of changes.
gulp watch
Spawns test runner and keep watching for changes.
gulp tdd
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.
FAQs
Command pattern implementation for angular 2. Command used to encapsulate information which is needed to perform an action.
We found that @ssv/ng2-command demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).