What is APP_BASE_HREF in Angular 10 ?
Last Updated :
13 Apr, 2021
In this article, we are going to see what is APP_BASE_HREF in Angular 10 and how to use it.
APP_BASE_HREF returns a predefined DI token for the base href of the current page. The APP_BASE_HREF is the URL prefix that should be preserved.
Syntax:
provide: APP_BASE_HREF, useValue: '/gfgapp'
Approach:
- In app.module.ts and APP_BASE_HREF in providers with useValue.
- In app.component.ts store APP_BASE_HREF into any variable and use it.
Example 1:
app.module.ts
Javascript
import { BrowserModule } from '@angular/platform-browser' ;
import { NgModule } from '@angular/core' ;
import { AppRoutingModule } from './app-routing.module' ;
import { AppComponent } from './app.component' ;
import {APP_BASE_HREF} from '@angular/common' ;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [ {provide: APP_BASE_HREF, useValue: '/gfgapp' } ],
bootstrap: [AppComponent]
})
export class AppModule { }
|
app.component.ts
Javascript
import { Component, Inject } from '@angular/core' ;
import {APP_BASE_HREF} from '@angular/common' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
title = 'demo1' ;
constructor(@Inject(APP_BASE_HREF) private baseHref:string) {
var a = this .baseHref;
console.log(a, " is base HREF" )
}
}
|
Output:
Share your thoughts in the comments
Please Login to comment...