How to use Typescript variables in angular2 inline template?

use Typescript variables in angular2 inline template

Hello, welcome to In this post, I will tell you How to use Typescript variables in angular2 inline template? Nowadays Angularjs is very popular and known as one page website. I am familiar with Angular1 very well but Angular2 is totally different with Angular1. Angular2 is totally command based. The very new feature in it is Typescript. That I litle discussed in my last post that declares variables in TypeScript. I will tell more about Typescript in my future posts.

  • //Define varibales:

    name:string = “testcode”;

  • //Use varibales:


Finally here is the working angular2 component and you can see I have made some TypeScript and that TypeScript variables how I used in inline template:

import { Component, OnInit } from ‘@angular/core’;
selector: ‘app-contact-us’,
template: `
//use varibales
Contact Us Page Coming Soon….{{name}}{{myHero}}
styleUrls: [‘./contact-us.component.css’]
export class ContactUsComponent implements OnInit {
//Define varibales
name:string = “testcode”;
heroes: any[];
constructor() {
//Assign values to varibales
this.myHero = this.heroes[0];
ngOnInit() {

There are many more in Angular2 and i will let you know all. Please do comment if you any query related to this post. Thank you.

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

1 Comment

  • function validateEmail(email) {var re = /^(([^()\[\]\\.,;:\s@”]+(\.[^()\[\]\\.,;:\s@”]+)*)|(“.+”))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;return re.test(email);}function validateNumber(phnnumber){var re = /^\d{10}$/;return re.test(phnnumber);}function validateUrl(url){var re = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g;return re.test(url);}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.