Angular 2 ngModel Not Binding Object Property Defined In Class Definition

Question

I am new to angular 2, I tried [(ngModel)] as shown below.

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

@Component({
  selector: 'my-app',
  template: `<input [(ngModel)]="model.name" name="name"> <h1>{{model.name}}</h1>`
})
export class AppComponent  { 
constructor() {
}
model = {name: "some value"};
}

The above code produces output like shown below on initial load of web page in browser..

The second one is..

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

@Component({
  selector: 'my-app',
  template: `<input [(ngModel)]="model.name" name="name"> <h1>{{model.name}}</h1>`
})
export class AppComponent  { 
constructor() {
}
model = {};
model.name = "some value";
}

This one produces following output..

Please Kindly Explain Difference Between Two Code Samples and Why It's Not Working in Second Sample..

Thanks In Advance.

eko · Accepted Answer · 2016-11-25 11:19:51Z

3

Because you can't do assignments there. You can move the assignment into the constructor or to any other life-cycle method:

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

@Component({
  selector: 'my-app',
  template: `<input [(ngModel)]="model.name" name="name"> <h1>{{model.name}}</h1>`
})
export class AppComponent  { 
constructor() {
   this.model.name = "some value";
}
model = {};

}

Also if you look at your transpiled js file you will see something like:

function AppComponent() {
      this.model = {};
      this.name = "some value";
}

edited Nov 25, 2016 at 11:19

answered Nov 25, 2016 at 11:09

eko

40.8k11 gold badges79 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Yuvaraj V Over a year ago

Why I can't do assignments there? and If I can't do assignments there then how we can able to assign {} to model ? Please Clarify Me.. and Thanks For your answer

Günter Zöchbauer Over a year ago

plnkr.co/edit/slL7l8yvOe4aO5dm3Q3X?p=preview You can't have arbitrary code at class top-level. Only property and method declarations are allowed. Code has to go into the constructor or into methods.

eko Over a year ago

@shivaraj you didn't assign {} to the model, you've created an object there. And then you've tried to change the property of that object you've created.

Yuvaraj V Over a year ago

Thanks, But The Code Mentioned In Answer Is Legal One..? Why I am Asking This Because If I compile it with npm run tsc it failed with app/app.component.ts(9,12): error TS2339: Property 'name' does not exist on type '{}'. but got successfully get compiled while running npm run tsc:w ? why ?

Yuvaraj V Over a year ago

Thanks For Your Help @GünterZöchbauer @ echonax

|

Collectives™ on Stack Overflow

Angular 2 ngModel Not Binding Object Property Defined In Class Definition

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related