Loading
 
What's Next: View All Tutorial →

Angular Js 2 - How to define local variable in the template Html component

A sample program to define the location variable in the agular js 2 component using  # and access it using the string interpolation {{ }}   import { Component } from '@angular/core'; @Component({ selector: 'my-app&...

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





A sample program to define the location variable in the agular js 2 component using  # and access it using the string interpolation {{ }}
 
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  
  <input type="text" name="text1" value="100" #empId/>
  {{empId.value}}
  
  <div #empName>Text</div>
  {{empName.text}}
  `
})
export class AppComponent {  }



Things to know:

#empId  is the local variable name that refers to input tag. This local variable can be accessed using {{empId.value}}

#empName is the local variable refering to <div> tag. The div content text can be accessed using {{empName.text}}
 

Program Execution


Click the below link 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:


 100
Text

 
Awaiting for Administrator approval




← Back to list


Related Post




×