Angular reference # vs ngModel

Question

I wonder when do I have to use [(ngModel)] on my input and when I can just use #reference For example

<div class="form-group">
  <div class="input-group mb-2">
    <input type="text" class="form-control" [(ngModel)]="newUser">
    <button class="btn btn-outline-success" (click)="onAddUser()">Add user</button>
  </div>
</div>

Should I do it this way here, or maybe I can do it this way instead:

<div class="form-group">
  <div class="input-group mb-2">
    <input type="text" class="form-control" #newUser>
    <button class="btn btn-outline-success" (click)="onAddUser(newUser.value)">
      Add user
    </button>
  </div>
</div>

I would be thankful for any answers)

Answer 1

From Documentation:

• [(ngModel)] allow you to bind a template element's value to a component variable.
  
• # : can be referred anywhere in the template

In summary, ngModel refers to the value of a variable, while the # reference refers to a template object (HTML Element). However, you can still access a template reference variable using ViewChild.

I think the examples you wrote are both correct. I would prefer using ngModel if I need the value in my component, and # if I need it in the DOM.

Answer 2

These are two different concepts:

NgModel

Creates a FormControl instance from a domain model and binds it to a form control element.

While a template reference variable

(...) is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component. (...)

They usages are completely different and it depends on your use case.

For example if you would like to reference some model (ngModel) using a var through the rest of your html you could do:

<div class="form-group">
  <div class="input-group mb-2">
    <input type="text" class="form-control" [(ngModel)]="newUser" #newUser="ngModel">
    <button class="btn btn-outline-success" (click)="onAddUser()">Add user</button>
  </div>
</div>

Now you could use #newUser for some form validations, etc., in the html.

Answer 3

You don't have to use [(ngModel)], ever.NgModel is a part of the Angular FormsModule. If you have the FormsModule imported, you can use the extra functionality of ngModel. Doing so creates an NgForm and FormControl that you can use in more complicated reactive and dynamic forms and will track the field's status, e.g. dirty, touched. It will also allow you to place error validators on the field, as well as expose an Observable stream of value changes.

Using template variables and ViewChild to just grab an input element and interact with it as you would with vanilla JS is just fine as well, especially if your use case is something simple. This way you could avoid including the FormsModule in your module.

Answer 4

For simple two-way binding (between component and template) [(ngModel)] may be preferable, but with a local reference we are able to work with any properties of any elements (if needed), not only with the value of an input element.