ngx-href

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
6. Let you transform text to well formatted anchor

Demo

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

Installation

npm install ngx-href

Inside your app.module.ts file.

import { NgxHrefModule } from 'ngx-href'

  imports: [
    /** Default
     * avoidSpam="false"
     * behavior="auto"
     * defaultOffset="0"
     * navbarOffset="0"
     * rel=undefined
     * retryTimeout=undefined
     * target="_self"
     **/ 
    NgxHrefModule.forRoot({}), 

    // Or
    NgxHrefModule.forRoot({
      avoidSpam: true,
      behavior:"smooth",
      defaultOffset:"30",
      navbarOffset:"60",
      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 [e-mail] 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">

defaultOffset

The standard offset to be added to your website scrollTo logic

Default: 0
Accepted value: number
Together with the navbarOffset will be the total offset for the scroll.

navbarOffset

An additional offset calculated base on your navbar height

Default: 0 Accepted value: number Together with the defaultOffset will be the total offset for the scroll.

You can update this value after the navbar is rendered.

<navbar #navbar>
   <!-- My html code -->
</navbar>

@ViewChild('navbar', { static: true }) navbar: ElementRef

constructor(
  private _ngxHrefService: NgxHrefService,
) {}

ngAfterContentInit(): void {  
  this._ngxHrefService.navbarOffset = this.navbar.nativeElement.offsetHeight
}

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:[phone]">
  [phone]
</a>

<!-- Email -->
<a href="mailto:[e-mail]">
  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