Bien , aquí andamos reforzando Angular 👍
Primeros pasos
Qué es Angular: ventajas y cómo aprenderlo
Instalación de Angular CLI
Comandos de Angular para correr tu proyecto
Estructura de un proyecto en Angular
Conceptos básicos de TypeScript para usar Angular
Comunicación de datos
String interpolation
Property Binding
Introducción al Event Binding de Angular
Otros eventos que puedes escuchar
Data binding con ngModel
Estructuras de control
Uso de *ngIf
Uso de *ngFor
*ngFor para arrays
Uso de *ngSwitch
Angular Devtools
Estilos
Estilos a la lista de productos
Class and style
NgClass y NgStyle
Crear un formulario
Deploy
Despliegue con Firebase Hosting
Despedida
Continúa con el Curso de Angular: Componentes y Servicios
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Nicolas Molina
Property Binding es la manera que dispone Angular para controlar y modificar las propiedades de los distintos elementos de HTML. Para esto, simplemente utiliza los corchetes []
para poder modificar dinámicamente ese atributo desde el controlador.
src
de la etiqueta <img>
para modificar dinámicamente una imagen.href
de un <a>
para modificar un enlace.value
de un <input>
para autocompletar un valor de un formulario.disable
de un <input>
para habilitar/deshabilitar un campo de un formulario.Si tienes en tu componente:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
empresa = 'Platzi';
habilitado = true;
}
Puedes modificar el value de un campo de un formulario de la siguiente manera:
<input [value]="empresa" [disabled]="habilitado" />
Se imprime el valor de la propiedad empresa
como valor de un <input>
y gracias a la variable habilitado
controlas la edición del campo.
Aporte creado por: Kevin Fiorentino.
Aportes 33
Preguntas 7
Bien , aquí andamos reforzando Angular 👍
De los cursos de Angular que he tomado, es el que mas me ha gustado
Me parece que es mas ordenado que react, me esta gustando la sintaxis de angular
Este articulo hablo y da un ejejmplo sobre el property binding
https://medium.com/@yonem9/angular-qué-narices-es-eso-del-data-binding-y-los-pipes-f1a094eefb7f
Muy claro la explicación del Property Binding, a seguir con el curso hasta ahorita 10 de 10
# | String Interpolation | Property binding |
---|---|---|
1 | Ingresar contenido <p> <h1> donde es necesario renderizarlo | Son especificos para propiedades |
2 | Necesario para renderizar Strings | Necesario para renderizar objetos |
String : renderiza contenido
Propperty bIding: controlar y configurar propiedades
Recuerda:
El uso de property biding es para configurar propiedades de elementos HTML, estado del button, value…. y el String interpolation es para renderizar contenido.
No conocía la existencia de progress tag 😮 jajaja
Recuerden que, en la clase anterior se hablo de Renderizar contenido hacia el HTML, mientras que en esta se trata de Configurar propiedades de elementos de HTML.
¿Cuál es mejor? ¿String interpolation o Property Binding?
String interpolation es mejor para funciones de JS o TS que se renderizaran en el HTML. Mientras que las Property Binding son propiedades de etiquetas HTML.
estoy empezando a aprender Angular, estudio una técnica de desarrollo de software y soy estudiante de Platzi, ya estoy haciendo las practicas de estudio y trabajo con Angular, gracias a Platzi e podido aprender demasiado y sobresalir en mi área de trabajo, saludos desde Medellín Colombia.
por error en progress en vez de poner person.age puse person.avatar y se queda cargando de un lado a otro me parece gracioso.
Que bien, ahora por fin entiendo la diferencia entre String Interpolation y Property Binding
Mi resumen:
PROPERTY BINDING
Property Binding es la manera que dispone Angular para controlar y modificar las propiedades de los distintos elementos de HTML. Para esto, simplemente utiliza los corchetes [] para poder modificar dinámicamente ese atributo desde el controlador.
Algunos ejemplo de utilidades:
Si tienes en tu componente:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
empresa = 'Platzi';
habilitado = true;
}
Puedes modificar el value de un campo de un formulario de la siguiente manera:
<input [value]="empresa" [disabled]="habilitado" />
Se imprime el valor de la propiedad empresa como valor de un <input> y gracias a la variable que ha sido definida en el
componente logico y que por division de responsabilidades entre typescript y la vista, podemos pasar como datos de la propiedad
Utilizar Property Binding para modificar atributos de elementos html y String Interpolation para renderizar contenido de tipo string(ej: un parrafo)
Llegue tarde pero aqui andamos aprendiedo
muy buen curso, justo lo q necesitaba en estos tiempos
✅
Angular me gusto mas que React.
si vienende Vue y estan en angular estos conceptos les van a parecer faciles, lo mismo si van a Vue y vienen de angular les va a parecer muy facil
Ejemplo de código:
<progress [value]="persona.progress" max="100"></progress>
<img [src]="persona.img" alt=""/>
Podemos ver que esta actúa pasándole valores desde nuestro archivo de lógica
Por si a alguno le sirve, resulta que yo hice esto:
<img src={{img}} alt="imagen" [height]="heightImg" [width]="widthImg">
Pues bien, eso no mostraba ninguna imagen, porqué? . Resulta que como bien dijo Nicolás, las propiedades que se usan con property binding
tienen que ser nativas de html y “width”/“height” no lo son, para eso tenemos que especificar explicitamente que son propiedades de los atributos de la etiqueta, es decir
[attr.height]
quedando así el codigo:
<img src={{img}} alt="imagen" [attr.height]="heightImg" [attr.width]="widthImg">
El Property Binding es una técnica en Angular que se utiliza para enlazar el valor de una propiedad de un componente con el valor de una propiedad de un elemento de la vista.
Es una forma de enlazar los valores de un componente con la vista, permitiendo que los datos fluyan en una sola dirección.
Por ejemplo, supongamos que tenemos un componente con una propiedad nombre
y queremos enlazar su valor con el texto de un elemento de la vista:
<p [textContent]="nombre"></p>
En este ejemplo, estamos enlazando la propiedad textContent
del elemento <p>
con la propiedad nombre
del componente. Cada vez que se actualiza el valor de la propiedad nombre
en el componente, el valor de la propiedad textContent
en la vista también se actualizará automáticamente.
<aside>
💽 El Property Binding es muy útil cuando queremos enlazar valores de un componente con la vista de manera unidireccional. Al utilizar este enlace, podemos asegurarnos de que los valores siempre se mantengan sincronizados y que la vista siempre refleje el estado actual del componente.
</aside>
**String interpolation**
es una forma de insertar una expresión en medio de una cadena de texto. Se utiliza el símbolo {{ }}
para encerrar la expresión que se desea insertar, y la expresión se reemplaza con su valor cada vez que se actualiza.
La interpolación de cadenas es muy útil para mostrar valores que cambian dinámicamente, como el nombre de usuario o el resultado de una operación matemática.
Por otro lado, el Property Binding
es una técnica para enlazar el valor de una propiedad de un componente con el valor de una propiedad de un elemento de la vista. Es una forma de enlazar los valores de un componente con la vista, permitiendo que los datos fluyan en una sola dirección.
Para quienes estamos comenzando esto es confuso
El property binding es una técnica de programación que se utiliza en Angular, que es un marco de desarrollo de aplicaciones web basado en TypeScript. El property binding permite enlazar el valor de una propiedad de un componente de Angular con una expresión o valor en el HTML del componente.
Por ejemplo, supongamos que se tiene un componente con una propiedad llamada “mensaje”, que se quiere mostrar en una etiqueta HTML. Se puede utilizar el property binding para enlazar el valor de la propiedad “mensaje” con la etiqueta HTML de la siguiente manera:
<p [innerHTML]="mensaje"></p>
En este caso, se está utilizando el property binding para enlazar la propiedad “innerHTML” de la etiqueta HTML con la propiedad “mensaje” del componente. Cada vez que cambie el valor de “mensaje” en el componente, se actualizará automáticamente en la etiqueta HTML.
El property binding es una de las técnicas de enlace de datos más importantes en Angular, y se utiliza ampliamente para mostrar y modificar información en la interfaz de usuario de una aplicación.
No hay diferencia entre usar **String Interpolation** y **Property Binding** ya que con el primero se puede usar también para propiedades de elementos HTML, sin embargo, es recomendable el uso de Property Binding para manipular las propiedades de los elementos HTML además de que si se usan propiedades de objetos para alterar o mostrar un valor, lo mejor es usar este último.
Consejo de el teacher:
Utilizar Property Binding para modificar atributos de elementos html y String Interpolation para renderizar contenido de tipo string(ej: un parrafo)
para generar un componente en angular es ng generate component nameComponent ó ng g c property-binding
.
A mi me funciona sin colocar comillas dobles al llamar a la variable desde html.
Me está gustando mucho el curso hasta ahora
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?