Angular - [(ngModel)] vs [ngModel] vs (ngModel)

Question

I currently understand that [(ngModel)]="expression" is two-way binding from component to view and vice versa. I also understand that [ngModel]="expression" is one-way binding (I believe from component to view?). Then there's the possibility of (ngModel)="expression". I am mostly confused as to the differences between [ngModel] vs (ngModel). Could someone please explain?

EDIT: After playing around with, and reviewing the document snippet given by @Rohan Fating I realized that something like (ngModel) should take a statement, rather than an expression. That being said, would there ever be an appropriate time to use something like (ngModel) or would that even work in any circumstance?

Answer 1

This syntax:

[(ngModel)]="expression"

is unwrapped by the compiler into

[ngModel]="expression" (ngModelChange)="expression=$event"

which means:

1. there's a ngModel directive applied to an element (input)
2. this ngModel directive through ngModel binding takes the expression parameter
3. there's an output (event) ngModelChange

Now you can see that [ngModel] part is always there which as you noted will sync values down.

What happens when you specify (ngModel)="c()" is interesting. Normally, the (...) syntax is for events. So indeed Angular recognizes this as event and create appropriate listener in the component view factory:

function (_v, en, $event) {
    var ad = true;
    var _co = _v.component;
    ...
    if (('ngModel' === en)) {
        var pd_4 = (_co.c() !== false);
        ad = (pd_4 && ad);
    }
    return ad;
}

However, all (...) elements are also parsed as attributes, and so it will match the ngModel directive selector:

selector: '[ngModel]:not([formControlName]):not([formControl])'

so Angular will also initialize the ngModel directive class as a directive. However, since it doesn't have any input bindings defined through [...] syntax this directive will be skipped during change detection. And since also the event ngModel is not defined for the ngModel directive the usage (ngModel) will have no side effects and is meaningless.

Answer 2

[( in Angular is signalling a two-way data binding. Theoretically you could only bind to an event ((ngModel)) or to a value ([ngModel]). This gives you the ability to handle changes going down in a different way than changes coming up. With Angular 2 you have that flexibility.

You need to ngModelChange event and update value like I did below

Plunker link: https://plnkr.co/edit/RZMgM69doSHGBG1l16Qf?p=preview

@Component({
  selector: 'my-app',
  template: `
    <div>
    <input [ngModel]='value' (ngModelChange)='setModel($event)'/>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  value: string = '';
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  setModel(value) {
    this.value = value;
  }

}

Answer 3

[(ngModel)] is two way binding (NgModel) is one Way binding view to component [ngModel] is one way binding component to view