Fragment navigation is important in Angular applications for creating deep linking and bookmarking functionality within a single-page application (SPA). It allows users to navigate directly to specific sections or components within a page without reloading the entire page, enhancing user experience and facilitating content sharing and navigation.

Prerequisites

• Node >= 18.13.0
• Angular Cli v15

What is a fragment URL?

A fragment URL, also known as a fragment identifier or hash URL, is a URL that includes a fragment identifier preceded by a hash symbol (#). The fragment identifier refers to a specific section or element within a web page. In Angular applications, fragment URLs are commonly used for implementing client-side routing and navigation to specific sections or components within a single-page application.

Navigating to Fragment URLs in Angular

Angular provides the Router service, which allows us to navigate between different views within our application. To navigate to a fragment URL, we can use the navigate method of the Router service and specify the desired fragment as part of the navigation options

Step 1: Create an angular application

To create a new angular application we can use,

ng new fragment-urls
cd fragment-urls

This will create a new app in the directory fragment-urls, we then use the cd command to change the active directory.

Folder Structure

Folder Structure

Dependencies

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

Step 2: Add fragment routes

Fragment URL just targets the element whose id is the same as that of the fragment, and scrolls to that element. We will create a nav bar with three hyperlinks and a section for each. We will provide a unique id for each of the sections and also the same in the fragment attribute for the button.

<!-- app.component.html -->

<nav>
    <a routerLink="/" fragment="about-us">About Us</a>
    <a routerLink="/" fragment="services">Services</a>
    <a routerLink="/" fragment="contact-us">Contact Us</a>
</nav>

<section id="about-us">
    <h1>
        About Us
    </h1>
</section>
<section id="services">
    <h1>
        Services
    </h1>
</section>
<section id="contact-us">
    <h1>
        Contact Us
    </h1>
</section>

/* app.component.scss */

nav {
    width: 100vw;
    height: 56px;

    position: sticky;
    top: 0;

    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;

    background-color: aquamarine;
    color: green;
    font-size: 20px;

    a {
        text-decoration: none;
        color: inherit;
        cursor: pointer;

        &:hover {
            color: red;
            text-decoration: underline;
        }
    }
}

section {
    width: 100vw;
    height: 200px;
    padding: 16px;
    border: 1px solid black;

    &:nth-of-type(odd) {
        background-color: lightgray;
    }
}

// app.component.ts

import { ViewportScroller } from '@angular/common';
import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  title = 'fragment-urls';

  constructor(viewport: ViewportScroller) {
    viewport.setOffset([0, 56]);
  }
}

// app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter, withInMemoryScrolling } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
    providers: [provideRouter(routes, withInMemoryScrolling({
        anchorScrolling: 'enabled',
        scrollPositionRestoration: 'enabled',
    }))]
};

To start the application run the following command

ng serve --open

Output

How to Navigate Fragment URL in Angular 15?