Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

95
Vistas
What is the difference between the #name and [(ngModel)]="name" in Angular2 Form input?

I am a little bit confused, for some tutorial use # to get the input, while some use the [(ngModel)]. What is the effective difference between the two?

8 months ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

#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.

8 months ago · Santiago Trujillo Denunciar

0

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.

8 months ago · Santiago Trujillo Denunciar

0

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 : ->

8 months ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.