Data binding con ngModel

Recomiendo la siguiente lectura para complementar, personalmente me ha servido mucho cuando inicié hace unos meses a estudiar y trabajar con Angular.
Enlace

Apenas iniciando en Angular y ya voy viendo lo maravilloso que es este Framework.

Por Dios santo que delicia es Angular.
Por qué carajos no me había decidido antes a aprender esto?
🤯

Ahora es posible tener componentes independientes, esto permite que cada componente maneje sus dependencias de servicios, módulos u otros componentes internamente sin hacer importaciones de forma incremental como lo menciona Nico, agregando en el decorador @Component la propiedad standalone: true y la propiedad imports en la cuál se agregarían todas las importaciones que necesita el componente

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  standalone: true,
  imports: [ FormsModule ],
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

Esta parte es importante para entender los estados y ciclo de vida de angular

✨Tips de [(ngModel)] =”somValue”

• Se encarga de estar pendiente del input y sincroniza el valor.
• Para poder usar el ngModel, necesitamos agregar el módulo de AngularForm.
• Debemos importar el módulo de Formularios FormModule, en nuestro módulo.

DATA BINDING CON NGMODEL

El data binding, se refiere a una fusion entre escuchar un evento (event binding) y definir una
propiedad(property binding), es la union de las dos lo que es conocido como enlace de doble via.

En angular tenemos el ngModel el cual nos servira para los inputs. Gracias a sus caracteristicas, el
ngModel siempre esta pendiente del estado del input, si el campo es valido o no, la interaccion del input
con el usuario y ademas, sincroniaza su valor. Ya que le daremos provecho a esta utilidad, lo mas
indicado es usar uno de los paquetes de toda la gran plataforma de Angular y es el Angular Forms.

Angular forms lo podemos importar de la dependencia @angular/forms y es uno de los paquetes mas usados
ya que nos ayudara a construir formularios y sus propiedades.

• Sintaxis ngModel:

[(ngModel)] = "Some value";

• Ejemplo de como usar el data binding con el ngModel:

<input type="text" #inputName="ngModel" [(ngModel)]="person.name"><br>
<h2><strong>{{ person?.name }}</strong></h2>

Una anotacion para el equipo de Pltzi, el curso que dice el profe no esta dentro de la ruta de Angular Frontend, seria bueno depronto agregarlo.

Angular Forms

Ruta Angular Frontend

Los nuevos paquetes a instalar siempre se deben hacer en el app.module.ts. y si lo importas debe quedar en el imports para que todos los modulos lo puedan usar.

interesante el concepto de incremental, no la había escuchado de esa manera, al ir agregando los paquetes que necesitamos

Esto es interesante, pero aún mas RXJS con los formularios reactivos 🔥

ngModel es una directiva de Angular que se utiliza para enlazar datos bidireccionalmente entre un elemento de formulario y una propiedad de un componente de Angular. Esto significa que ngModel permite mostrar el valor de una propiedad del componente en un elemento de formulario y actualizar automáticamente la propiedad del componente cuando el usuario modifica el valor del elemento de formulario.

Por ejemplo, supongamos que tienes un componente con una propiedad llamada “nombre” y quieres enlazarla con un campo de entrada de texto en un formulario. Puedes utilizar ngModel de la siguiente manera:

<input type="text" [(ngModel)]="nombre">
En este caso, se está utilizando el enlace de datos bidireccional [(ngModel)] para enlazar el valor del campo de entrada de texto con la propiedad “nombre” del componente. Cada vez que el usuario introduce o modifica el valor del campo de entrada, se actualizará automáticamente la propiedad “nombre” del componente y, al mismo tiempo, se mostrará el nuevo valor del campo de entrada en la interfaz de usuario.

ngModel es una de las directivas más útiles de Angular y se utiliza ampliamente en aplicaciones web para enlazar datos entre formularios y componentes. Es importante tener en cuenta que ngModel requiere la importación del módulo “FormsModule” en el módulo principal de la aplicación para funcionar correctamente.

si son importantes las importaciones, para que nos ayude con los modulos de angular

Cuando se utiliza el ngModel sin la etiqueta <form> es necesario proporcionar un “nombre de atributo” de manera que el control pueda ser registrado en el formulario padre bajo ese nombre.

Importante recalcar que para hacer uso de ngModel debemos importar el “FormModule” y habilitar el mismo en app.module.ts

✅

Esta es la segunda vez que tomo este curso. Y no me acordaba como declarar la variable template de mi ngModel, pero ahora sera más difícil de que se me olvide 💪

Data binding con ngModel

El ngModel es una directiva en Angular que te permite realizar Two-Way Data Binding. Con Two-Way Data Binding, puedes vincular una propiedad tanto para la lectura como para la escritura, lo que significa que tanto la vista como el componente pueden actualizar el valor de la propiedad y ambos se mantendrán sincronizados.

Para usar el ngModel, primero debes importar el módulo FormsModule en tu módulo principal:

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule
  ],
  ...
})
export class AppModule { }

Luego, en tu vista, puedes vincular una propiedad con el ngModel de la siguiente manera:

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

En este ejemplo, estamos vinculando la propiedad nombre con el input. Cualquier cambio en el valor del input se reflejará en la propiedad nombre, y cualquier cambio en la propiedad nombre se reflejará en el valor del input.

El ngModel es muy útil cuando trabajas con formularios en Angular, ya que te permite realizar Two-Way Data Binding con los elementos de formulario, como inputs, select y textarea. Con el ngModel, puedes simplificar mucho el proceso de recopilar y validar datos de un formulario en tu aplicación.

Para las personas que no entendieron bien el template variable es practicamente:

Piense en lo que obtendría document.querySelector(‘input’) y eso es lo que tenemos aquí

<input type="text" #coffee>
<p>{{ coffee.value }}</p>

Esto es tan grande, que hasta tiene su propio curso, WOWWWWW

me gusto esta clase. gracias

si que tengo que ver el funcionamiento de Angular Forms, me va a servir de mucho, por ahora, aca esta mi evidencia de las pruebas

Nico, gracias, va muy bien el curso