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

user_2521287 0
Viewed 958

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.

angular
1 Answers

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.

user_18791750
Related