Property Binding

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Si ya tienes una cuenta,

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 15

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Victor Manuel Franco Cañon

hace 8 meses

Propierty binding

Es una forma de controlar dinamamicamente algunos atributos html para que estos sean renderizados apartir una string, variable o atributo de un objeto de la capa logica.
Solo funcionan en una direccion desde la capa logica (conponent.ts) al objeto destino (atributo html), a esto se le conoce como flujo de datos.
Debemos vincular los valores del componente a los atributos html, esto logramos encerrando el atributo html entre “square brakets”.
Los corchetes [ ] (square brakets) hacen que Angular evalúe el lado derecho de la asignación como una expresión dinámica. Sin los corchetes, Angular trata el lado derecho como un literal de cadena y establece la propiedad en ese valor estático.
```
  <button disabled="false"></button> // dato fijo como string
  <button [disabled]="btnDisabled"></button> //dato dinamico
```

A menudo, “interpolation” y “Property Binding” pueden lograr los mismos resultados. Los siguientes pares de enlaces hacen lo mismo.

  <p><img src="{{itemImageUrl}}"> is the <i>interpolated</i> image.</p>
  <p><img [src]="itemImageUrl"> is the <i>property bound</i> image.</p>

Utilice cualquiera de las formas cuando represente valores de datos como cadenas.
Es preferible el metodo de “interpolation” para facilitar la lectura.
Al establecer una propiedad de elemento en un valor de datos que no sea una cadena, debe usar “Property Binding”.
Se recomienda comprender los “Event binding” para entender el flujo de datos de la aplicacion y como este interactua con “interpolation” y “Property Binding”.

Conceptos extraídos de:

Joel Alfredo Campos Rios

hace 8 meses

Bien , aquí andamos reforzando Angular 👍

Japheth Calzada López

hace 8 meses

De los cursos de Angular que he tomado, es el que mas me ha gustado

Luis Alberto Burgos Vilca

hace 4 meses

El ávatar
https://www.w3schools.com/howto/img_avatar.png

Cecilia Riveros

hace 7 meses

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

Brayan Daniel Chacón Arrascue

hace 5 meses

Muy claro la explicación del Property Binding, a seguir con el curso hasta ahorita 10 de 10

jmigueljimenez

hace 4 meses

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.

Reinaldo Omar Mendoza Leal

hace 3 meses

Me parece que es mas ordenado que react, me esta gustando la sintaxis de angular

Edinson Colonia Paez

hace 7 meses

String : renderiza contenido
Propperty bIding: controlar y configurar propiedades

Ralph Ortega

hace 5 meses

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.

Marianella Rezendes

hace 2 meses

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)

Diego Fernando Caviedes Camaho

hace 5 meses

para generar un componente en angular es ng generate component nameComponent ó ng g c property-binding