How to use Typescript variables in angular2 inline template?

·

,

Hello, welcome to therichpost.com. 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:

    {{name}}

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’;
@Component({
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[];
myHero:string;
constructor() {
//Assign values to varibales
this.heroes=[‘Windstorm’,’Bombasto’,’Magneta’,’Tornado’]
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. Therichpost.com

Comments

One response to “How to use Typescript variables in angular2 inline template?”

  1. alexa Avatar
    alexa

    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

Your email address will not be published. Required fields are marked *

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