ngx-href

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

Demo

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

19.2.0 Breaking change

• Use of standalone
• Configuration is now optional

19.0.0 Breaking change

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

Installation

npm install ngx-href

Optional configuration

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));

Angular routing

Nothing to do it should work out of the box

Avoid Spam

1. Change the href from the DOM from example@outlook.com 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

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

Offset

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

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

Can also be passed individually directly through html

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

Target attribute

Default: "_self"
Accepted value: string

Can also be passed individually directly through html

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

Usage

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

Directive

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>

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

  <!-- 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>

Service

// 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>

Authors and acknowledgment

• maintainer Raphaël Balet