ConcretePage.comAngular Routing URL Fragment
December 21, 2023
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 },
];
EmployeeDetailsComponent will execute.
For the path /teamdetail, the component
TeamDetailsComponent will execute.
Contents
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>
fragment property adds the fragment at the end of the URL with prefix # .
/empdetail#empworkdetail
teamFragment = "teamworkupdate";
<a routerLink="/teamdetail" [fragment]="teamFragment">Team Details</a>
/teamdetail#teamworkupdate
queryParams.
<a routerLink="/empdetail" fragment ="empworkdetail" [queryParams]="{empname:'Lokesh', age: 30, city:'Varanasi'}">Employee Details</a>
/empdetail?empname=Lokesh&age=30&city=Varanasi#empworkdetail
queryParams.
<a routerLink="/teamdetail" [fragment]="teamFragment" [queryParams]="{teamname:'Angular Team', teamsize: 10}">Team Details</a>
/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'});
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 usingRouter.navigateByUrl() method.
this.router.navigateByUrl("/empdetail?#empworkdetail");
this.router
.navigateByUrl("/empdetail?empname:'Lokesh'&age=30&city=Dwarika#empworkdetail");
4. Passing Fragment using Router.navigate()
We can append fragment to URL usingRouter.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);
