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.
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 
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"); 
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)
   });
} 
2.
const fragment = this.route.snapshot.fragment;
console.log("Hash fragment: ", fragment); 
3.
const urlTree = this.router.parseUrl(this.router.url);
console.log("Hash fragment: ", urlTree.fragment); 

6. References

POSTED BY
ARVIND RAI
ARVIND RAI







©2024 concretepage.com | Privacy Policy | Contact Us