https://github.com/briancodes/ngx-routerlink-delay
Extension of the RouterLinkWithHref directive a[routerLink] with an additional @Input data binding for delaying navigation
https://github.com/briancodes/ngx-routerlink-delay
Last synced: 10 months ago
JSON representation
Extension of the RouterLinkWithHref directive a[routerLink] with an additional @Input data binding for delaying navigation
- Host: GitHub
- URL: https://github.com/briancodes/ngx-routerlink-delay
- Owner: briancodes
- Created: 2018-03-06T12:12:05.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-05-23T19:21:18.000Z (about 2 years ago)
- Last Synced: 2025-08-28T15:22:26.491Z (11 months ago)
- Language: TypeScript
- Homepage: https://briancodes.github.io/ngx-routerlink-delay/
- Size: 524 KB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://travis-ci.org/briancodes/ngx-routerlink-delay)
[](https://github.com/angular/angular-cli)
# @bcodes/ngx-routerlink-delay
Extension of the RouterLinkWithHref directive `a[routerLink]` with an additional `@Input` data binding for delaying navigation
Packaged as an Angular module using [ng-packagr](https://github.com/dherges/ng-packagr)
Development project generated with [Angular CLI](https://github.com/angular/angular-cli)
# Usage
>**Rxjs v6.2.0 Update:** For use with Angular v6 use the latest npm release. See [v2.0.0 Release](https://github.com/briancodes/ngx-routerlink-delay/releases/tag/v2.0.0)
```bash
npm install @bcodes/ngx-routerlink-delay
```
To use the extended `routerLink` directive, import the module:
```javascript
import { RouterLinkDelayModule } from '@bcodes/ngx-routerlink-delay';`
```
Replace the default `routerLink` and `routerLinkActive` selectors with the extended ones:
* `routerLink` -> `bcRouterLink`
* `routerLinkActive` -> `bcRouterLinkActive`
The navigation delay `@Input` is in milliseconds:
* [navigationDelay]="1000"
### Example
`app.component.html`
```html
```
`app.module.ts`
```typescript
import { AppComponent } from './app.component';
import { RouterLinkDelayModule } from '@bcodes/ngx-routerlink-delay';
import { PageOneComponent } from './pages/page-one/page-one.component';
import { PageTwoComponent } from './pages/page-two/page-two.component';
@NgModule({
declarations: [
AppComponent,
PageOneComponent,
PageTwoComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RouterLinkDelayModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
> **Why bcRouterLinkActive?** Internally `routerLinkActive` queries the template using the `type` of the `routerLink` directive i.e. `RouterLinkWithHref`. Extending `routerLink` meant we also had to extend `routerLinkActive` to query for the new `type`
# Library Development: Build, Run, Test
## Build the library
* `npm run build:lib`
This will create a `dist/lib` folder with generated Angular module for distribution
### Live Reload
The library source (*lib/src*) is located alongside a ready-to-run *Angular ClI* project. The library module has been imported in `app.module.ts`, and is ready to roll as is. The project can be served with `ng serve`, and any changes made to the the directive source files in *lib/src* will trigger a live reload
### Symbolic npm link
For testing the *bundled* module locally, you can use `npm link`. You will firstly need to replace the `import` in `app.module.ts` as follows:
```javascript
import { RouterLinkDelayModule } from '../../lib/src/router-link-delay.module';
// replace with
import { RouterLinkDelayModule } from '@bcodes/ngx-routerlink-delay';
```
From the `dist/lib` folder run:
* `npm link`
In the application root e.g. ngx-routerlink-delay folder, run:
* `npm link @bcodes/ngx-routerlink-delay`
## Run
* `ng serve` or
* `ng serve --preserve-symlinks`
## Testing
The tests are contained in the `lib/test` folder. The files to be tested are imported from the `dist/lib` folder, so we are testing the bundled library
The test files are located outside of the root `src` folder and required the following changes to the test setup:
`tsconfig.spec.json`
```json
tsconfig.spec.json
"include": [
"../lib/**/*.spec.ts",
"**/*.spec.ts",
"**/*.d.ts"
]
```
`tests.ts`
```javascript
const context_lib = require.context('../lib', true, /\.spec\.ts$/);
context_lib.keys().map(context_lib);
```
Run the tests with `ng test`, or `npm run test:lib` to do a build and test
## GitHub Pages
```
ng build --prod --base-href "https://briancodes.github.io/ngx-routerlink-delay/"
ngh --dir="dist/app" --message="Commit message"
```
## License
This project is licensed under the terms of the MIT license