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

• @ngx-href
  • Demo
  • Installation
  • Angular routing
  • Avoid Spam
  • Scroll logic
    • Behavior
    • defaultOffset
    • navbarOffset
  • External link
    • Rel attribute
    • Target attribute
    • target attribute
  • Usage
    • Directive
    • Service
  • Authors and acknowledgment

Demo

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

Installation

npm install ngx-href

Inside your app.module.ts file.

import { ngxHrefModule, ngxHrefService } from 'ngx-href'

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

    // Or
    ngxHrefModule.forRoot({
      avoidSpam: true,
      behavior:"smooth",
      defaultOffset:"30",
      navbarOffset:"60",
      rel:"noopener nofollow",
      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
}

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

target attribute

Usage

Wherever you plan to use the href directive

import { ngxHrefModule } from 'ngx-href'

imports: [
  ngxHrefModule,
]

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>


<!-- Scroll -->
<a href="#myAnchor">
  My scroll to anchor
</a>

<!-- Scroll in different page -->
<a href="/angular/router#link">
  My internal link with anchor
</a>

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