forms - templateUrl giving undefined when referring to class properties -

while following tutorial forms @ https://angular.io/docs/ts/latest/guide/forms.html

i keep getting undefined errors whenever referring of properties defined in .ts file long use templateurl , seperate .html

when take same html , place in .ts file inside `` in template works fine.

so question is: templateurl file need define scope somehow? tutorial doesn't seem cover , assumed access component variables called it.

import { component } '@angular/core'; import { ngform } '@angular/forms';  import { guitar } './guitar';  @component({   selector: 'guitar-form', //  template: ` //  <div class="container"> //    <h1>guitar form</h1> //    <form> //      <div class="form-group"> //        <label for="brand">brand</label> //        <select class="form-control" required //                  [(ngmodel)]="testmodel.brand" name="brand"> //          <option *ngfor="let b of brands" [value]="b">{{b}}</option> //        </select> //        todo: remove this: {{testmodel.brand}} //      </div>  //      <div class="form-group"> //        <label for="model">model</label> //        <input type="text" class="form-control" required //           [(ngmodel)]="testmodel.model" name="model"> //          todo: remove this: {{testmodel.model}} //      </div>  //      <div class="form-group"> //        <label for="color">color</label> //        <input type="text" class="form-control" //                [(ngmodel)]="testmodel.color" name="color"> //                  todo: remove this: {{testmodel.color}} //      </div>  //      <button type="submit" class="btn btn-default">submit</button> //    </form> //  </div> //  `   templateurl: 'app/guitar-form.component.html' }) export class guitarformcomponent {    brands = ['fender', 'gibson', 'guild', 'jackson', 'epiphone', 'charvel'];    testmodel = new guitar(69, this.brands[0], 'stratocaster', 'black');    submitted = false;    onsubmit() { this.submitted = true; }    // todo: remove when we're done   diagnostic() { return json.stringify(this.model); } } 

funny, undefined disappeared when commented out demonstrate ironically diagnostic no longer working when placed in html , 1 aspect working earlier. have verified connectivity on individual basis...

<div class="container">   <h1>guitar form</h1>   <form>     {{ diagnostic }}     <div class="form-group">       <label for="brand">brand</label>       <select class="form-control" required                 [(ngmodel)]="testmodel.brand" name="brand">         <option *ngfor="let b of brands" [value]="b">{{b}}</option>        </select>               {{ testmodel.brand }}     </div>      <div class="form-group">       <label for="model">model</label>       <input type="text" class="form-control" required          [(ngmodel)]="testmodel.model" name="model">         todo: remove this: {{testmodel.model}} -->     </div>      <div class="form-group">       <label for="color">color</label>       <input type="text" class="form-control"         [(ngmodel)]="testmodel.color" name="color">         {{ testmodel.color }}     </div>      <button type="submit" class="btn btn-default">submit</button>   </form> </div> 

i think need add

 moduleid: module.id, 

to @component({...}) decorator.

see angular2 - meanings of module.id in component?