Monday, November 28, 2022

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.

the authortherichpost
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 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Angular 15, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce 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.