No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Property Binding

7/22
Recursos

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.

Utilidades

  • El atributo src de la etiqueta <img> para modificar dinámicamente una imagen.
  • El atributo href de un <a> para modificar un enlace.
  • El atributo value de un <input> para autocompletar un valor de un formulario.
  • El atributo 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

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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:

  • El atributo src de la etiqueta <img> para modificar dinámicamente una imagen.
  • El atributo href de un <a> para modificar un enlace.
  • El atributo value de un <input> para autocompletar un valor de un formulario.
  • El atributo 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 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

Que es property Binding?

  • Property binding nos permite pasarle valores a las propiedades nativas de html y enviarle estados
  • Se utilizan [] para las propiedades de las etiquetas
  • String interpolation sirve para insertar contenido en una parte y property binding es para propiedades

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

Property Binding


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>

Property Binding Vs String interpolation

  • **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

Mi resultado de la práctica de esta clase:

.

A mi me funciona sin colocar comillas dobles al llamar a la variable desde html.

Me está gustando mucho el curso hasta ahora