Using HTML anchor link #id in Angular 6

Question

I am working with Angular 6 project in which I have disabled/removed hash-location-strategy which removes # from URL.

due to this change the link having:

<         


        

Answer 1

I was looking for a similar solution and tried to use the ngx-scroll-to package and found that its not working in latest version of angular so decided to look into other option and found that we can use scrollIntoView

HTML code :

<button (click)="scrollToElement(target)"></button>
<div #target>Your target</div>

Ts code :

  scrollToElement($element): void {
    console.log($element);
    $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }

Answer 2

This is for Angular 9, but, I am sure the community will benefit this,

You can use Location in the @angular/common to get the current path.

Let's say you have the following element with an id to focus

<div id="bring-me-to-the-focus">

I am only showing extracted code blocks here.

import { Location } from '@angular/common';

constructor(private location: Location) { }

this.location.path() + '#bring-me-to-the-focus'; 

I am sure this will help someone :)

Cheers.

Answer 3

As pointed out by Nitin Avula in a comment, using routerLink for a hash anchor only works if you are navigating to a different route or have onSameUrlNavigation enabled in your router config.

A way to get round this is to get rid of routerLink and instead use this.router.navigate in your *.component.ts file with the fragment parameter:

HTML -

<a (click)="scrollToContactTypes()">Contact Types</a>

TypeScript -

constructor(private router: Router) { }

scrollToContactTypes() {
    this.router.onSameUrlNavigation = "reload";
    this.router.navigate(["/settings"], { fragment: "contactTypes" }).finally(() => {
        this.router.onSameUrlNavigation = "ignore"; // Restore config after navigation completes
    });
}

Answer 4

For accessibility reasons I had to a link at the beginning of the document to provide direct access to the content to user using a screen reader, skipping that way parts of the page repeating from page to page.

As I needed the link to stay focusable (preferably keeping the href attribute), as I was actually outside the app-root or any component (still solution works inside a component), to do that I used simple good old fashion html and javascript :

<a href="./#content"
     onclick="event.preventDefault(); location.hash='content';"
     class="content-shortcut"
     title="Access page content directly"
     i18n-title
     aria-label="Access page content directly"
     i18n-label>Access page content directly</a>
  <style>
    .content-shortcut {
      position: absolute;
      opacity: 0;
      height: 0px;
      font-size: 1px;
    }

    .content-shortcut:focus,
    .content-shortcut:active {
      position: relative;
      opacity: 1;
      height: auto;
      font-size: 1em;
      display: block;
      color: black;
      background: white;
    }

  </style>

Answer 5

use ngx page scroll

 <a pageScroll href="#awesomePart">Take me to the awesomeness</a>
 <h2 id="awesomePart">This is where the awesome happens</h2>

Answer 6

You need to use hash routing strategy to enable the hash scrolling.

you need to give second argument as an object like RouterModule.forRoot([],{useHash:true}}. It will work.