Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rbalet/ngx-href
A directive that allows href to understand Angular's router while retaining its default functionality.
https://github.com/rbalet/ngx-href
Last synced: 24 days ago
JSON representation
A directive that allows href to understand Angular's router while retaining its default functionality.
- Host: GitHub
- URL: https://github.com/rbalet/ngx-href
- Owner: rbalet
- License: mit
- Created: 2023-10-11T12:08:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-24T13:50:22.000Z (9 months ago)
- Last Synced: 2024-04-24T16:53:25.363Z (9 months ago)
- Language: TypeScript
- Size: 388 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-href (⭐2) - A directive that allows href to understand Angular's router while retaining its default functionality. (Recently Updated / [Nov 16, 2024](/content/2024/11/16/README.md))
- fucking-awesome-angular - ngx-href - A directive that allows href to understand Angular's router while retaining its default functionality. (Table of contents / Third Party Components)
- awesome-angular - ngx-href - A directive that allows href to understand Angular's router while retaining its default functionality. (Table of contents / Third Party Components)
README
# ngx-href
A library that allows href to understand Angular's router while retaining its default functionality.
[](https://www.npmjs.com/package/ngx-href)
[](https://codecov.io/gh/rbalet/ngx-href)
1. Use `router.navigate()` for [internal link](#angular-routing)
2. Support scroll with the `#` attributes and let you configure the [scrolling logic](#scroll-logic)
3. Automatically append `rel="nooepener"` & `target="_blank"` to external link [if wished so](#installation)
4. Support using `href` with the html `button` [attribute](#directive)
5. Enable easy `Scroll when ready` mechanism which works with `SSR`
6. Let you transform text to well formatted `anchor`
## Demo
- https://stackblitz.com/~/github.com/rbalet/ngx-href
## 19.0.0 Breaking change
* **Now use `scrollIntoView` which render the `Offset` useless.**
* Please use [scroll-margin-top](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top) instead.
* Nows also work on SSR
## Installation
```sh
npm install ngx-href
```
Inside your `app.module.ts` file.
```typescript
import { NgxHrefModule } from 'ngx-href'
imports: [
/** Default
* avoidSpam="false"
* behavior="auto"
* block="start"
* inline="nearest"
* rel=undefined
* retryTimeout=undefined
* target="_self"
**/
NgxHrefModule.forRoot({}),
// Or
NgxHrefModule.forRoot({
avoidSpam: true,
behavior:"smooth",
block:"center",
inline:"nearest",
rel:"noopener nofollow",
retryTimeout: 300,
target:"_blank",
}),
],
```
## Angular routing
Nothing to do it should work out of the box
## Avoid Spam
1. Change the `href` from the DOM from `[email protected]` into `example(at)outlook.com`
2. Let js handle the click event.
## Scroll logic
### Behavior
**Default:** `"auto"`
**Accepted value:** `ScrollBehavior` // ("auto" | "instant" | "smooth")
Can also be passed individually directly through html
```html
```
### Offset
If you wish to add offset, add `scroll-margin-top: $offset` to your targeted component -> [read more](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top)
### retryTimeout
**Default:** `undefined`
**Accepted value:** `number`
Trigger a second `scrollTo` event after `retryTimeout` milliseconds.
**Note:** This should be avoided, prefer playing with skeleton and fixed height
## External link
### Rel attribute
**Default:** `undefined`
**Accepted value:** [string](https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel)
Can also be passed individually directly through html
```html
```
### Target attribute
**Default:** `"_self"`
**Accepted value:** [string](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)
Can also be passed individually directly through html
```html
```
## Usage
Wherever you plan to use the href directive or pipe
```typescript
import { NgxHrefDirective, ToAnchorPipe } from 'ngx-href'
imports: [
NgxHrefDirective,
ToAnchorPipe,
]
```
Then you can use it as you would normally use an `a` element
### Directive
Normal use
```html
My internal link
My internal link with anchor
```
### Pipe: _ToAnchorPipe_
The `toAnchor` pipe let you
1. transform an element ot a correct anchor
example: `my Title $%` will be transform to `my-title`
2. Emit that this anchor have been created, so that we can scroll to that element
```html
```
### Service
```typescript
// foo.component.ts
import { NgxHrefService } from 'ngx-href'
// ...
constructor(public ngxHrefService: NgxHrefService) {}
```
Normal use
```html
Scroll to #myAnchor
A title
```
## Authors and acknowledgment
* maintainer [Raphaël Balet](https://github.com/rbalet)
[](https://www.buymeacoffee.com/widness)