A service that applications can use to interact with a browser's URL.

See more...

class Location {
  static normalizeQueryParams: (params: string) => string
  static joinWithSlash: (start: string, end: string) => string
  static stripTrailingSlash: (url: string) => string
  path(includeHash: boolean = false): string
  getState(): unknown
  isCurrentPathEqualTo(path: string, query: string = ''): boolean
  normalize(url: string): string
  prepareExternalUrl(url: string): string
  go(path: string, query: string = '', state: any = null): void
  replaceState(path: string, query: string = '', state: any = null): void
  forward(): void
  back(): void
  onUrlChange(fn: (url: string, state: unknown) => void)
  subscribe(onNext: (value: PopStateEvent) => void, onThrow?: (exception: any) => void, onReturn?: () => void): SubscriptionLike
}

Provided in

• 'root'

• RouterTestingModule

Description

Depending on the LocationStrategy used, Location persists to the URL's path or the URL's hash segment.

Further information available in the Usage Notes...

Static properties

Methods

Usage notes

It's better to use the Router#navigate service to trigger route changes. Use Location only if you need to interact with or create normalized URLs outside of routing.

Location is responsible for normalizing the URL against the application's base href. A normalized URL is absolute from the URL host, includes the application's base href, and has no trailing slash:

• /my/app/user/123 is normalized
• my/app/user/123 is not normalized
• /my/app/user/123/ is not normalized

Example

import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
import {Component} from '@angular/core';

@Component({
  selector: 'path-location',
  providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}],
  template: `
    <h1>PathLocationStrategy</h1>
    Current URL is: <code>{{location.path()}}</code><br>
    Normalize: <code>/foo/bar/</code> is: <code>{{location.normalize('foo/bar')}}</code><br>
  `
})
export class PathLocationComponent {
  location: Location;
  constructor(location: Location) {
    this.location = location;
  }
}