Última actualización: 6 abril, 2023¿Qué es el databinding?
El databinding es la forma que tiene Angular para permitirnos mostrar contenido dinámico en lugar de estático (en inglés, hardcoded). Podríamos traducir el databinding como "comunicación" entre nuestro código HTML (archivo .html) y nuestra lógica de programación (archivo .ts).
¿MÁS PERDID@ QUE UN PULPO EN UN GARAJE?
Si acabas de aterrizar aquí y estos temas de Angular te suenan a chino, te recomiendo que empieces por este artículo de introducción a Angular con las claves para entenderlo.
Angular nos proporciona varias maneras de comunicación entre archivos. Podemos:
- mostrar información en el HTML (también conocido como template) desde el archivo .ts.
- pasar información al archivo TypeScript (en adelante, TS) dada por el usuario al hacer click en un botón, por ejemplo. Es lo que se conoce como ''reaccionar a eventos del usuario''.
- combinar (a la misma vez) ambas formas de intercambio de información.
databinding = comunicación
código TS (lógica de programación)
mostrar información
string interpolation {{ data }}
property binding [property]="data"
reaccionar a eventos del usuario
event binding (event)="expression"
combinación de ambos
two way databinding [(ngModel)]="data"
template (HTML)
CONTENIDO RESTRINGIDO
El resto del contenido es sólo para miembros del Club ACTech. Puedes unirte aquí o iniciar sesión si ya eres miembro.
THE END!
¡Y con esto terminamos nuestra guía introductoria al databinding en Angular! Espero que hayas aprendido algo nuevo 
. Si te queda alguna duda, ¡nos vemos en los comentarios!
Sobre la autora de este post
Soy Rocío, una abogada reconvertida en programadora. Soy una apasionada de aprender cosas nuevas y ferviente defensora de que la única manera de ser feliz es alcanzando un equilibrio entre lo que te encanta hacer y lo que te saque de pobre. Mi historia completa, aquí.
Más recursos de aprendizaje
En mi experiencia, la manera más eficaz para aprender Angular es combinando varias vías de aprendizaje. Uno de mis métodos favoritos son los vídeo-cursos y mi plataforma predilecta para eso es Udemy. He hecho varios cursos pero sólo recomiendo aquellos que verdaderamente me han sido útiles. Aquí van:
Si necesitas apoyo en forma de libro, puede que éstos te sirvan de ayuda:
La programación es un mundo que evoluciona a una velocidad de vértigo. Los autores de estos libros lo saben, por eso suelen encargarse de actualizar su contenido regularmente. Asegúrate de que así sea antes de adquirirlos 
.
Participo en el programa de afiliados de Udemy y Amazon, lo que significa que, si compras alguno de estos cursos y/o libros, yo me llevaré una pequeña comisión y a ti no costará nada extra. Vamos, lo que se dice un win-win .
Otros artículos que pueden interesarte
Hola, Ro, he estado leyendo tu blog y me parece interesante, muchas gracias por compartir tus conocimientos….. espero me puedas ayudar tengo mi ngModel = blogs.nombre el cual me escribe perfectamente en mis templates de mi HTML, pero en mi input agregue un valué para que en automático me cargue el contenido que tengo en mi colección en firebase, lo que quiero es que esa colección se pinte en mi vista, ya que no me esta permitiendo, te dejo parte de mi código espero me puedas ayudar… te mando un cordial saludo!
/////////HTML//////////
Nombre
Este campo es obligatorio
///////html/////
{{blog.nombre}}
{{blog.area}}
{{blog.titulo}}
{{blog.contenido}}
{{blog.fecha}}
{{blog.subirarchivo}}
/////consulta al Backend/////
firebase.auth().onAuthStateChanged((user) => {
if (user) {
console.log(‘Usuario’, user.email)
firestore().collection(«usuarios»).where(‘email’,’==’, user.email).get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
this.datosn = doc.data().displayName; this.datosa = doc.data().departamento;
console.log(‘Datos’,this.datosn)
console.log(‘Datos’,this.datosa)
});
});
} else {
}
});
¡Muchas gracias Víctor! ?
Felicidades!!!, excelente tutorial.
¡A ti por pasarte por el blog JuanR! 🙂
Excelente la forma tan detallada que tienes de explicar, de lo mejor que hay en internet acerca de angular, gracias Rocío.