How to display the app version in Angular? - GeeksforGeeks

02 Nov, 2020
Angular is a client-side TypeScript based, front-end web framework by Google. Angular 8 is a great, reusable UI (User Interface) framework for the developers which help in building Single Page Applications. Generally, all the angular 2+ projects or applications are referred to as Angular applications. The earlier version is called Angular.js and angular is a complete re-write of Angular.js which comes with rich and useful features.
Approach:
In order to know the version, first, we need to import ‘VERSION’ from ‘@angular/core’.
The reason for importing this is that it is an object which contains properties that we can use to know the version.
After importing it now access the version using the ‘full’ key from the imported Version.
After retrieving the value assign it to a variable and then using a string interpolation display in the HTML file.
Once you are done with the above implementation, start the project.
Code Implementation:
app.component.ts:JavascriptJavascriptimport { Component, VERSION } from '@angular/core';  @Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: [ './app.component.css' ]})  export class AppComponent  {  version = VERSION.full;}app.component.html:HTMLHTML<h2> Welcome to GeeksforGeeks </h2>  <p> The version of the App is : {{ version }} </p>app.module.ts:JavascriptJavascriptimport { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { AppComponent } from './app.component';  @NgModule({  imports:      [ BrowserModule ],  declarations: [ AppComponent ],  bootstrap:    [ AppComponent ]})export class AppModule { }
app.component.ts:JavascriptJavascriptimport { Component, VERSION } from '@angular/core';  @Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: [ './app.component.css' ]})  export class AppComponent  {  version = VERSION.full;}
app.component.ts:
Javascript
import { Component, VERSION } from '@angular/core';  @Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: [ './app.component.css' ]})  export class AppComponent  {  version = VERSION.full;}
app.component.html:HTMLHTML<h2> Welcome to GeeksforGeeks </h2>  <p> The version of the App is : {{ version }} </p>
app.component.html:
HTML
<h2> Welcome to GeeksforGeeks </h2>  <p> The version of the App is : {{ version }} </p>
app.module.ts:JavascriptJavascriptimport { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { AppComponent } from './app.component';  @NgModule({  imports:      [ BrowserModule ],  declarations: [ AppComponent ],  bootstrap:    [ AppComponent ]})export class AppModule { }
app.module.ts:
Javascript
import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { AppComponent } from './app.component';  @NgModule({  imports:      [ BrowserModule ],  declarations: [ AppComponent ],  bootstrap:    [ AppComponent ]})export class AppModule { }
Output: 
 
Note: My version number is 6 and hence it is displaying as 6.
AngularJS-Misc
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
Introduction to AngularJS
AngularJS | ng-src Directive
ng-content in Angular
How to force redirect to a particular route in angular?
Express.js express.Router() Function
How to set input type date in dd-mm-yyyy format using HTML ?
Installation of Node.js on Linux
Differences between Functional Components and Class Components in React
How to create footer to stay at the bottom of a Web page?