On this page
UrlTree
class  final 
Represents the parsed URL.
class UrlTree {
  constructor(root: UrlSegmentGroup = new UrlSegmentGroup([], {}), queryParams: Params = {}, fragment: string = null)
  root: UrlSegmentGroup
  queryParams: Params
  fragment: string | null
  queryParamMap: ParamMap
  toString(): string
}
   Description
Since a router state is a tree, and the URL is nothing but a serialized state, the URL is a serialized tree. UrlTree is a data structure that provides a lot of affordances in dealing with URLs
Further information is available in the Usage Notes...
Constructor
        
          | 
      
root | 
            UrlSegmentGroup | 
            The root segment group of the URL tree Optional. Default is   | 
           
queryParams | 
            Params | 
            The query params of the URL Optional. Default is   | 
           
fragment | 
            string | 
            The fragment of the URL Optional. Default is   | 
           
Properties
| Property | Description | 
|---|---|
root: UrlSegmentGroup | 
       Declared in Constructor  The root segment group of the URL tree  | 
      
queryParams: Params | 
       Declared in Constructor  The query params of the URL  | 
      
fragment: string | null | 
       Declared in Constructor  The fragment of the URL  | 
      
queryParamMap: ParamMap | 
       Read-Only | 
Methods
| 
         
         toString()
          | 
      
|---|
        
          | 
      
Usage notes
Example
@Component({templateUrl:'template.html'})
class MyComponent {
  constructor(router: Router) {
    const tree: UrlTree =
      router.parseUrl('/team/33/(user/victor//support:help)?debug=true#fragment');
    const f = tree.fragment; // return 'fragment'
    const q = tree.queryParams; // returns {debug: 'true'}
    const g: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET];
    const s: UrlSegment[] = g.segments; // returns 2 segments 'team' and '33'
    g.children[PRIMARY_OUTLET].segments; // returns 2 segments 'user' and 'victor'
    g.children['support'].segments; // return 1 segment 'help'
  }
}
  © 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
 https://angular.io/api/router/UrlTree