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.

PathLocationStrategy

A LocationStrategy used to configure the Location service to represent its state in the path of the browser's URL.

See more...

      
      class PathLocationStrategy extends LocationStrategy implements OnDestroy {
onPopState(fn: LocationChangeListener): void
getBaseHref(): string
prepareExternalUrl(internal: string): string
path(includeHash: boolean = false): string
pushState(state: any, title: string, url: string, queryParams: string)
replaceState(state: any, title: string, url: string, queryParams: string)
forward(): void
back(): void
getState(): unknown
historyGo(relativePosition: number = 0): void // inherited from common/LocationStrategy
abstract path(includeHash?: boolean): string
abstract prepareExternalUrl(internal: string): string
abstract getState(): unknown
abstract pushState(state: any, title: string, url: string, queryParams: string): void
abstract replaceState(state: any, title: string, url: string, queryParams: string): void
abstract forward(): void
abstract back(): void
historyGo(relativePosition: number)?: void
abstract onPopState(fn: LocationChangeListener): void
abstract getBaseHref(): string }

Provided in

  • 'root'

Description

If you're using PathLocationStrategy, you may provide a APP_BASE_HREF or add a <base href> element to the document to override the default.

For instance, if you provide an APP_BASE_HREF of '/my/app/' and call location.go('/foo'), the browser's URL will become example.com/my/app/foo. To ensure all relative URIs resolve correctly, the <base href> and/or APP_BASE_HREF should end with a /.

Similarly, if you add <base href='/my/app/'/> to the document and call location.go('/foo'), the browser's URL will become example.com/my/app/foo.

Note that when using PathLocationStrategy, neither the query nor the fragment in the <base href> will be preserved, as outlined by the RFC.

Further information is available in the Usage Notes...

Methods

      
      onPopState(fn: LocationChangeListener): void
    
Parameters
fn LocationChangeListener
Returns

void

      
      getBaseHref(): string
    
Parameters

There are no parameters.

Returns

string

      
      prepareExternalUrl(internal: string): string
    
Parameters
internal string
Returns

string

      
      path(includeHash: boolean = false): string
    
Parameters
includeHash boolean

Optional. Default is false.

Returns

string

      
      pushState(state: any, title: string, url: string, queryParams: string)
    
Parameters
state any
title string
url string
queryParams string
      
      replaceState(state: any, title: string, url: string, queryParams: string)
    
Parameters
state any
title string
url string
queryParams string
      
      forward(): void
    
Parameters

There are no parameters.

Returns

void

      
      back(): void
    
Parameters

There are no parameters.

Returns

void

      
      getState(): unknown
    
Parameters

There are no parameters.

Returns

unknown

      
      historyGo(relativePosition: number = 0): void
    
Parameters
relativePosition number

Optional. Default is 0.

Returns

void

Usage notes

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