Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

UrlTree

Represents the parsed URL.

See more...

      
      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

      
      constructor(root: UrlSegmentGroup = new UrlSegmentGroup([], {}), queryParams: Params = {}, fragment: string = null)
    
Parameters
root UrlSegmentGroup

The root segment group of the URL tree

Optional. Default is new UrlSegmentGroup([], {}).

queryParams Params

The query params of the URL

Optional. Default is {}.

fragment string

The fragment of the URL

Optional. Default is null.

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(): string
    
Parameters

There are no parameters.

Returns

string

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'
  }
}