#xxx

#xxx allows you to get an element reference.

<input #inp (change)="foo = inp.value">

listenes to the change event and calls onChange() and passes the inputs value property

For two-way binding you also need

<input #inp (change)="foo = inp.value)" [value]="foo = $event">

NgModel

<input [(ngModel)]="foo">

uses the NgModel directive that allows to integrate DOM input elements and custom components into Angular form functionality. It can also be used without a form. NgModel is an abstraction over all kinds of elements and components, while above (#inp) example only works for input elements that have a value property and emit a change event.

[(ngModel)]="foo"

is the short form of

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

which shows it is for two-way binding.

hint

#xxx returns a component or directive instance, if the element is not a plain DOM element but an Angular component or has an Angular directive applied.

The #name syntax is a template reference which refers to the html object, more information can be found on in the Angular docs: Angular template guide

The [(ngModel)] is setting two way binding on the elements value and assigning that to a variable.

Template reference variable is only used for accessing the dom properties of the element. So for two binding or any change we need to write
-> but by using ngmodel binding which helps in angular two way data binding can be done in a short by : ->