CODEWITHSUNDEEP
angularjsangular
Jamal James
Jamal James

Reputation: 91

Angular2 two-way-binding NOT working

I can't figure out what will be the cause of this simple two-way binding not working in Angular 2, is it related to the configs, or?

import User from "../interfaces/user.interface.ts";
import {Component} from "angular2/core";

@Component({
  selector: 'application',
  template: '<h2>{{name}}</h2><input [(ngModel)]="name" /><input [(ngModel)]="name" />'
})
export class ApplicationComponent {
  public name:String = "test";
}

and here we have the main file:

///<reference path="../node_modules/angular2/typings/browser.d.ts" />

import 'reflect-metadata';

import {bootstrap} from "angular2/platform/browser"
import {ApplicationComponent} from './components/application.component';

bootstrap(ApplicationComponent);

When I start typing in the input field, the surrounding value between

{{name}}

is not updated?

I can't continue playing with Angular 2, if this simple binding doesn't work and I don't believe this is related to the config files (webpack.config, tsconfig).

index.html file just in case!

<!DOCTYPE html>
<html>
  <head>
    <title>asd</title>
  </head>
  <body>
    <application></application>
  </body>
  <script src="/bundle.js"></script>
</html>

Any ideas to why two-way binding is not working, I appreciated :)

Upvotes: 1

Views: 638

Answers (1)

Vivien Hung
Vivien Hung

Reputation: 235

If you have a Plunker or JSFiddle, that might be helpful to understand what's wrong there.

I remove the following code from your example. And it works for me. Here is my Plunker with Angular2 2.0.0-beta.

import User from "../interfaces/user.interface.ts";

and

import 'reflect-metadata';

Upvotes: 1

Related Questions