How to output current Angular 2 version in your app -- Words (331)

How to output current Angular 2 version in your app

In this short tip tutorial we are going to learn how to display the current Angular 2 version in a web app so let's get started .

One note before i start ,because i’m still testing and learning Angular 2 i’m using plinker to play with all the new concepts and features so i don’t have to setup any development environment just to experiment with the framework so if you are not a building a real web app using Angular 2 you can just use plunker or any online JavaScript editor that supports Angular 2 .

To get version information you need VERSION module from '@angular/core' so you make sure to import it first

import {Component, NgModule, VERSION} from [email protected]/core'

Next create an app component

  selector: 'my-app',
  template: `
      <h2>Hello </h2>
      <p> Your Angular 2 version is </p>
export class App {
  constructor() { = 'Angular2'
    this.version  = VERSION.full;

We have used the @Component annotation to create a simple component that has a template with two bindings name and version

Next in our component class we have added to member variables with type string to hold the name and version .

Then we have initialized the two variables in the constructor ,name with “Angular 2” string and version with VERSION.full which holds the full version of currently used Angular 2 .

Next you just display this component in your html page using


You should get something like <!-- _includes/image.html -->

    <img src="" alt="How to output current Angular 2 version in your app"/>

Depending on your Angular 2 version .

That‘s it see you in the next tip tutorial .

mrnerd is a Web Entrepreneur & Developer, Digital Marketer and a Passionate Blogger. He writes about software and website development,money making tips and SEO etc.. He is a tech addict and a computer geek with a lot of hobbies.