How to display the app version in Angular?
Last Updated :
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:
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:
HTML
< h2 > Welcome to GeeksforGeeks </ h2 >
< p > The version of the App is : {{ version }} </ p >
|
-
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...