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 '@angular/core'

Next create an app component

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello </h2>
      <p> Your Angular 2 version is </p>
    </div>
  `,
})
export class App {
  name:string;
  version:string;
  constructor() {
    this.name = '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

<body>
  <my-app>
  loading...
</my-app>
</body>

You should get something like

Depending on your Angular 2 version .

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

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status