CODEWITHSUNDEEP
angular
DrZoo
DrZoo

Reputation: 1697

Angular 6: [(ngModel)]="variable" vs. ngModel="{{ variable }}"

The Udemy Angular 6 video I'm watching shows to use the first syntax. However, I'm using WebStorm as my IDE and it does not give any sort of predictive text/suggestion when I use the [(ngModel)]="variable" syntax.

If I just type ng, it will give me all of the Angular ng attributes. If I select ngModel it formats the code as ngModel="{{ variable }}".

The code produces the same result regardless of which method I use.

So I was wondering is one method technically correct over the other? I was confused why the video shows to use the [()] method, but WebStorm wants me to use the other ngModel="{{ }}" method.

Upvotes: 3

Views: 1079

Answers (1)

Tomasz Błachut
Tomasz Błachut

Reputation: 2507

There is difference, [] means one-way data binding, top-down. [()] means two-way data binding.

On the other side, [ngModel]="field" is equivalent to ngModel="{{field}}".

Furthermore [(thing)]="field" is a banana in a box syntax sugar. It is a combination of [thing]="field" and (thingChange)="field = $event". thingChange here is an EventEmitter.

Upvotes: 6

Related Questions