Angular Routing URL Fragment

By Arvind Rai, December 21, 2023

In Angular routing, fragment is added to URL using fragment property.
1. fragment can be passed
a. With routerLink,
b. With Router.navigate(),
c. With Router.navigateByUrl as absolute URL,
d. With Router.createUrlTree()

2. fragment can be accessed by
a. Subscribing ActivatedRoute.fragment,
b. Using ActivatedRoute.snapshot.fragment,
c. Using UrlTree.fragment

In my demo application, I have created following routes.

export const routes: Routes = [
    { path: 'empdetail', component: EmployeeDetailsComponent },
    { path: 'teamdetail', component: TeamDetailsComponent },
];

For the path /empdetail, the component EmployeeDetailsComponent will execute.
For the path /teamdetail, the component TeamDetailsComponent will execute.

1. Passing fragment with routerLink
2. Passing Fragment with UrlTree and Router.navigateByUrl()
3. Passing Fragment with Absolute URL
4. Passing Fragment using Router.navigate()
5. Accessing Fragment
6. References

1. Passing Fragment with routerLink

fragment is a property of RouterLink Directive. This property appends the fragment in the URL with prefix hash (#) .
a. Find a router link.

<a routerLink="/empdetail" fragment ="empworkdetail">Employee Details</a>

The fragment property adds the fragment at the end of the URL with prefix # .

/empdetail#empworkdetail

b. If we have a property in component as below,

teamFragment = "teamworkupdate";

Use property binding for fragment.

<a routerLink="/teamdetail" [fragment]="teamFragment">Team Details</a>

We will get following URL.

/teamdetail#teamworkupdate

c. Find the code to use fragment with queryParams.

<a routerLink="/empdetail" fragment ="empworkdetail" [queryParams]="{empname:'Lokesh', age: 30, city:'Varanasi'}">Employee Details</a>

URL:

/empdetail?empname=Lokesh&age=30&city=Varanasi#empworkdetail

One more example with queryParams.

<a routerLink="/teamdetail" [fragment]="teamFragment" [queryParams]="{teamname:'Angular Team', teamsize: 10}">Team Details</a>

URL:

/teamdetail?teamname=Angular Team&teamsize=10#teamworkupdate

2. Passing Fragment with UrlTree and Router.navigateByUrl()

UrlTree class represents a URL. Its constructor accepts root as UrlSegmentGroup, queryParams as Params and fragment as string. UrlTree can also be created using Router.createUrlTree().

const urlTree: UrlTree =
      this.router.createUrlTree(['empdetail'], {fragment: 'empworkdetail'});

Call Router.navigateByUrl() by passing UrlTree instance.

this.router.navigateByUrl(urlTree);

3. Passing Fragment with Absolute URL

To pass a fragment in the URL, we can create absolute URL and call it using Router.navigateByUrl() method.

this.router.navigateByUrl("/empdetail?#empworkdetail");

Fragment with query parameters.

this.router
    .navigateByUrl("/empdetail?empname:'Lokesh'&age=30&city=Dwarika#empworkdetail");

4. Passing Fragment using Router.navigate()

We can append fragment to URL using Router.navigate() method that accepts commands and extras as arguments. The extras is NavigationExtras that has properties as relativeTo, fragment, queryParams, queryParamsHandling, preserveFragment.
Find the code to pass fragment with Router.navigate() .

this.router.navigate(['teamdetail'],  {
  queryParams: {teamname:'Java Team', teamsize: 15},
  relativeTo: this.route,
  fragment: 'teamworkupdate'
});

5. Accessing Fragment

We can access hash fragment from URL in following ways.
1.

constructor(private route: ActivatedRoute, private router: Router){}
ngOnInit() {
   this.route.fragment.subscribe((fragment: string | null) => {
        console.log("Hash fragment: ", fragment)
   });
}

const fragment = this.route.snapshot.fragment;
console.log("Hash fragment: ", fragment);

const urlTree = this.router.parseUrl(this.router.url);
console.log("Hash fragment: ", urlTree.fragment);

6. References

POSTED BY

ARVIND RAI

LEARN MORE

JAVA SPRING BOOT ANGULAR Angular Material NGRX JAVASCRIPT ANDROID THYMELEAF FREEMARKER Hibernate Struts 2 Testing MAVEN APACHE API JACKSON API JUNIT 5