What is APP_BASE_HREF in Angular 10 ? Last Updated : 13 Apr, 2021 Comments Improve Suggest changes Like Article Like Report 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: Comment More infoAdvertise with us Next Article What is APP_BASE_HREF in Angular 10 ? T taran910 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Similar Reads What is the AppModule in Angular ? In Angular, AppModule plays an important role as the entry point to an Angular application. In this article, we'll learn about what AppModule is, its structure, and its significance in Angular applications. We'll also look at some examples to have a clear understanding. Table of Content What is AppM 4 min read What is the Purpose of base href Tag in Angular ? In this article, we will see what is base href tag in Angular, along with understanding their basic implementation with the help of examples. Base href TagThe base href is important for generating correct routes, in -case you are deploying your project in a subfolder. The base href element has the a 2 min read What is CommonModule in Angular 10 ? In this article, we are going to see what is CommonModule in Angular 10 and how to use it. CommonModule is used to export all the basic Angular directives and pipes. It is re-exported when we import BrowserModule into our angular application, BrowserModule is automatically imported into our applicat 2 min read What is NgStyle in Angular 10 ? In this article, we are going to see what is NgStyle in Angular 10 and how to use it. NgStyle is used to add some style to an HTML element Syntax: <element [ngStyle] = "typescript_property"> Approach:Â Create the Angular app to be usedIn app.component.html make an element and sets its class us 1 min read What are angular Material Icons ? Angular Material is a UI component library which is developed by Google so that Angular developers can develop modern applications in a structured and responsive way. By making use of this library, we can greatly increase the user experience of an end-user thereby gaining popularity for our applicat 3 min read Like