A library that allows href to understand Angular's router while retaining its default functionality.

1. Use router.navigate() for internal link
2. Support scroll with the # attributes and let you configure the scrolling logic
3. Automatically append rel="nooepener" & target="_blank" to external link if wished so
4. Support using href with the html button attribute
5. Enable easy Scroll when ready mechanism which works with SSR
6. Let you transform text to well formatted anchor

• https://stackblitz.com/~/github.com/rbalet/ngx-href

• Use of standalone
• Configuration is now optional

• Now use scrollIntoView which render the Offset useless.
• Please use scroll-margin-top instead.
• Nows also work on SSR

npm install ngx-href

Inside your app.module.ts file.

import { NgxHrefServiceProvider } from 'ngx-href' bootstrapApplication(AppComponent, { providers: [ { provide: NgxHrefServiceProvider, useValue: { /** Default  * avoidSpam="false"  * behavior="auto"  * block="start"  * inline="nearest"  * rel=undefined  * retryTimeout=undefined  * target="_self"  **/ avoidSpam: true, defaultRelAttr: '', defaultTargetAttr: '_blank', retryTimeout: 300, }, }, ], }).catch((err) => console.error(err));

Nothing to do it should work out of the box

1. Change the href from the DOM from example@outlook.com into example(at)outlook.com
2. Let js handle the click event.

Default: "auto"
Accepted value: ScrollBehavior // ("auto" | "instant" | "smooth")

Can also be passed individually directly through html

<a href="https://my-external-url.com" behavior="instant">

If you wish to add offset, add scroll-margin-top: $offset to your targeted component -> read more

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

Default: undefined
Accepted value: string

Can also be passed individually directly through html

<a href="https://my-external-url.com" rel="noopener nofollow">

Default: "_self"
Accepted value: string

Can also be passed individually directly through html

<a href="https://my-external-url.com" target="_blank">

Wherever you plan to use the href directive or pipe

import { NgxHrefDirective, ToAnchorPipe } from 'ngx-href' imports: [ NgxHrefDirective, ToAnchorPipe, ]

Then you can use it as you would normally use an a element

Normal use

<!-- Angular router --> <a href="/angular/router/link"> My internal link </a> <!-- Or with a button --> <button href="/angular/router/link"> My internal link </button> <!-- External link --> <a href="https://external-url.com"> An external link </a> <!-- Tel --> <a href="tel:+41791112233"> +41791112233 </a> <!-- Email --> <a href="mailto:foobar@outlook.com"> foobar&#64;outlook.com </a> <!-- Scroll --> <a href="#myAnchor"> My scroll to anchor </a> <!-- Scroll in different page --> <a href="/angular/router#link"> My internal link with anchor </a>

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

 <!-- Just transform the title to anchor like string--> <div [id]="my Title $%"| toAnchor : false"> </div> <!-- If an href has been previously triggered, scroll to this element --> <div [id]="my Title $%"| toAnchor"> </div>

// foo.component.ts import { NgxHrefService } from 'ngx-href' // ... constructor(public ngxHrefService: NgxHrefService) {}

Normal use

<button (click)="ngxHrefService.scrollTo(#myAnchor)"> Scroll to #myAnchor </button> <!-- some html --> <h2 id="myAnchor">A title</h2>

• maintainer Raphaël Balet