2 way data binding didn't works in angular 2

Question

In my angular 2 application i tried to bind view data using ngmodel,but it didnt works as i expected.

event.component.html

 <div  class="form-group">
     <label for="comment">About Us:</label>
         <input type="text" name="aboutus" class="form-control" 
 [(ngModel)]="home.aboutus" required placeholder="aboutus"/>{{home.aboutus}}

 </div>

homemenu.ts

  export class Home {
  aboutus: string;
    }

eventcomponent.ts export class EventComponent { home:Home; } constructor() { }

Answer 1

its always good idea to initialise class variables in constructor like this

export class EventComponent {
   home:Home = null; // or home:Home; 
   constructor() { 
        this.home = new Home()
    }
}

Answer 2

It should be just aboutus

  <input type="text" name="aboutus" class="form-control" 
 [(ngModel)]="aboutus" required placeholder="aboutus"/>{{aboutus}}

Answer 3

You need to initialize home in event component.ts:

export class EventComponent {
       home:Home = new Home(); 
       constructor() { }
   }

Answer 4

Since home is not initialized that's why home.aboutus is not bind with html template.

Try Below Code

export class EventComponent {
    home:Home;

    constructor() {
        this.home = new Home();
    }

}

Answer 5

bind the home instance property instead and bind [(ngModel)]="home.aboutus" spit the entered value using string interpolation {{home.aboutus}}.

export class EventComponent{
      home: Home;
      constructor() {
        this.home = new Home();
      }
}