Loading
 
What's Next: View All Tutorial →

Angular JS 2 - How to access variable and function in html template

The variable value can be accessed in the template html using the String interpolation method. It is wrapped with two curly braces {{ }} Example Program:   import { Component } from '@angular/core'; @Component({ sel...

Published Date: 06/12/2016  Last Modified Date: 06/12/2016    New Post





The variable value can be accessed in the template html using the String interpolation method. It is wrapped with two curly braces
{{ }}

Example Program:


 
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
            Emp Id: {{empId}}  <br>
            Emp Name: {{empName}} <br>
            Desgination: {{getDesignation()}}
    `
})
export class AppComponent {
  
  empId = '1000';
  empName = 'John';
  getDesignation(){
    return "Specialist";
  }
  
}



Things to know:

empId, empName is the class level variable that is access in the template using {{empId}} and {{empName}}

getDesignation() - is the user defined function that return a string. This can the access in html template using {{getDesignation()}}
 

Program Execution


Click below url to open the Live Editor and open the app.component.ts file and copy,paste the entire above code snippet to run the program.

https://angular.io/resources/live-examples/setup/ts/eplnkr.html 
 

Program Output


Emp Id: 1000 
Emp Name: John 
Desgination: Specialist



 
Awaiting for Administrator approval




← Back to list


Related Post




×