A clean way to handle href with Angular

Today, let’s explore the proper way to handle href in Angular using the e **ngx-href **library.

https://blog.angular.dev/angular-v17-2-is-now-available-596cbe96242d

What are we talking about:

1. SEO & External URLs
2. SPAM prevention
3. Scroll-to links
4. Optimisation
5. Usage
6. Contributing

1: SEO & External URLs

Challenge: If you want to use Angular’s Material button with an external URL, you may come across (click)="openUrl()" solutions. However, while they work, they aren’t SEO-friendly since web crawlers don’t recognize these as valid links.

Solution: Once the library and directive are installed, it’s as easy as using:

<button mat-button href="https://external-url.com" target="_blank" rel="noopener nofollow">
  An external link
</button>

2: SPAM Prevention

Challenge: Displaying emails or phone numbers can invite spam.

Solution: The library obfuscates these href values until a user clicks on them.

<!-- Tel -->
<a href="tel:+41791112233">
  +41791112233
</a>

<!-- Email -->
<a href="mailto:foobar@outlook.com">
  foobar&#64;outlook.com
</a>

The displayed link will look like foobar(at)outlook.com until clicked, helping reduce spam.

3: Scroll-to Links

Challenge: You want links to navigate to a specific section of your website.

Solution: Use the directive with internal anchor links:

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

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

To dynamically generate anchors, use the toAnchor pipe:

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

You can also navigate programmatically with:

<button (click)="ngxHrefService.scrollTo(#myAnchor)">
  Scroll to #myAnchor
</button>

4: Optimisation

Challenge: Handling a mix of internal and external links dynamically in Angular.

Solution: The ngx-href directive automatically differentiates between internal and external links, ensuring the proper use of routerLink to avoid unnecessary reloads.

<!-- Angular router for internal links -->
<a href="/my-page">
  My internal link
</a>
<a href="https://my-website/my-page">
  My internal link
</a>

<!-- External link -->
<a href="https://external-url.com">
  An external link
</a>

5. Usage

You’re convinced ? Then let’s use this thing.

Step 1: Install the library

npm i ngx-href

Step 2: Configure (Optional)

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

Step 3: Use

// any-component.ts
import { NgxHrefDirective, ToAnchorPipe, NgxHrefService } from 'ngx-href'

imports: [
  NgxHrefDirective, // `href=""`
  ToAnchorPipe, // `| toAnchor`
  NgxHrefService, // `ngxHrefService.scrollTo()`
]

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

6. Contributing

If you notice any issues or have suggestions, feel free to open an issue. I’m always happy to improve the library.

Thanks for reading, and happy coding!

In Plain English 🚀

Thank you for being a part of the **In Plain English** community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: **X | [LinkedIn](https://www.linkedin.com/company/inplainenglish/) | [YouTube](https://www.youtube.com/channel/UCtipWUghju290NWcn8jhyAw) | [Discord](https://discord.gg/in-plain-english-709094664682340443) | [Newsletter](https://newsletter.plainenglish.io/) | [Podcast](https://open.spotify.com/show/7qxylRWKhvZwMz2WuEoua0)**
• **Create a free AI-powered blog on Differ.**
• More content at **PlainEnglish.io**