ngx-void-link v0.0.0

ngx-void-link

Because I'm tired of copying this stuff between projects. https://www.npmjs.com/package/ngx-void-link

About

Sometimes we need to handle link (<a>) element clicks in code. Generally it's not ideal to use links as though they were buttons (for non-navigational purposes) but sometimes it's reasonable.

Often we put href="javascript:void(0)", or call preventDefault on events, or use empty routerLink etc. to kill the default link behaviour and do what we need in the (click) event handler. This can look messy after a while.

Just put ngxVoid on your link and be done with it.

Getting Started

1. Install via npm or yarn

npm i -S ngx-void-link
//------------- OR --------------
yarn add ngx-void-link

2. Import NgxVoidLinkModule in your application

import { NgxVoidLinkModule } from 'ngx-void-link';
@NgModule({
  ...
  imports: [NgxVoidLinkModule],
  ...
})
export class AppModule { }

Usage

Add ngxVoid to any link you intend to handle in (click) event.

<a ngxVoid (click)="onClick()">Fake link</a>

Local Development

If you wish to contribute to this repository, below are the steps for local development.

1. Clone the repository git clone https://github.com/cf91/ngx-void-link.git
2. Run npm install to install the dependencies
3. Run npm build to build both the library and demo app and create a link
4. Run npm start to build and watch the demo app (opens the app at http://localhost:4200/ automatically)
5. Run npm watch:lib to build and watch the library

Build

Run npm run build to build the library and demo app together. The build artifacts will be stored in the dist/ directory.

This step is used by CircleCI to build both library and demo app. After a succesful build, a new semantic version of library is published to npm.

Tests

Run npm run test:lib or npm run test:app to execute the unit tests via Karma.