title: How to bind object property to textbox in angular2
body: <p>I am new to Angular and i am trying to bind the form which consists of text boxes from model object.
  but i am receiving an  error like "Unhandled Promise rejection: Template parse errors:Can't bind to 'NgModel' since it isn't a known property of 'input'"</p>
  
  <p>i had invest lot of time in google but still problem exists </p>
  
  <p>Below are my code.</p>
  
  <p><strong>html:</strong></p>
  
  <pre><code>    &lt;div&gt;
       &lt;div class="col-sm-6 form-group"&gt;
          &lt;label class="control-label"&gt;Project Name:&lt;/label&gt;
          &lt;input type="text" class="form-control" id="txtProjName" [(NgModel)]="projectFieldsdtl.PROJECT_NAME" &gt;
      &lt;/div&gt;
  
       &lt;div class="col-sm-6 form-group"&gt;
          &lt;label class="control-label"&gt;Project Manager Name:&lt;/label&gt;
          &lt;input type="text" class="form-control" id="txtProjManager" &gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6 form-group"&gt;
          &lt;label class="control-label"&gt;Project Manager Email ID:&lt;/label&gt;
          &lt;input type="text" class="form-control" id="txtProjManagerMailID" &gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>    import { NgModule }      from '@angular/core';
      import { BrowserModule } from '@angular/platform-browser';
      import { AppComponent }  from './app.component';
      import { FormsModule} from '@angular/forms';  
      import { HttpModule } from '@angular/http';
      import {SpotCheckStatusComponent} from './spotcheckstatus.component';
  
      @NgModule({
        imports:      [ BrowserModule ,FormsModule,HttpModule ],
        declarations: [ AppComponent,SpotCheckStatusComponent ],
        bootstrap:    [ SpotCheckStatusComponent ]
      })
      export class AppModule { }
  </code></pre>
  
  <p><strong>projectFields.ts</strong></p>
  
  <pre><code>        export class projectFields {
                  public PROJECT_CODE:string;
                  public PROJECT_NAME:string
                  public PROJECT_MANAGER: string;
                  public PROJECT_MANAGER_EMAIL_ID: string;    
          }
  </code></pre>
  
  <p><strong>SpotCheckStatusComponent.ts</strong></p>
  
  <pre><code>            import {Component,OnInit ,OnChanges} from '@angular/core';
          import {IMyDpOptions} from 'mydatepicker';
          import {HttpService} from './http.service';
          import { serviceLine } from './models/serviceLine';  
          import { projectFields } from './models/projectFields';  
  
  
          @Component({
            selector: 'my-app',
            styleUrls:['/css/home.css'],
            templateUrl:'./SpotCheckStatus.html',
            providers:[HttpService]
  
          })
          export class SpotCheckStatusComponent  implements OnInit
          {
               name = 'SpotCheckStatus'; 
  
               public projectFieldsdtl: projectFields[];  
  
            constructor(
              private httpService: HttpService
            ) {}
  
            ngOnInit(){
  
                    this.httpService.getProjectCode(serviceline).subscribe(
                    response=&gt; {      
  
                      this.projectFieldsdtl=response[0];
                      },
                    error=&gt; {
                        console.log("ERROR: ",error);
                        console.log(error.json()); //gives the object object
                    },
                    () =&gt; {
                        console.log("Completed");
                    }
  
                    );
              }
          }
  </code></pre>
  
  <p>And finally projectFieldsdtl got the object as below:</p>
  
  <pre><code>    [{
      PROJECT_CODE:"9999"
      PROJECT_MANAGER:"shekat"
      PROJECT_MANAGER_EMAIL_ID:"teja.ravi@gmal.com"
      PROJECT_NAME:"ABFL"
      }]
  </code></pre>