A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Property Binding

7/21
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.

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 鈥渟quare 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, 鈥渋nterpolation鈥 y 鈥淧roperty 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 鈥渋nterpolation鈥 para facilitar la lectura.

  • Al establecer una propiedad de elemento en un valor de datos que no sea una cadena, debe usar 鈥淧roperty Binding鈥.

  • Se recomienda comprender los 鈥淓vent binding鈥 para entender el flujo de datos de la aplicacion y como este interactua con 鈥渋nterpolation鈥 y 鈥淧roperty Binding鈥.

Bien , aqu铆 andamos reforzando Angular 馃憤

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

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

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.

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

String : renderiza contenido
Propperty bIding: controlar y configurar propiedades

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.

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

Que bien, ahora por fin entiendo la diferencia entre String Interpolation y Property Binding

Llegue tarde pero aqui andamos aprendiedo

muy buen curso, justo lo q necesitaba en estos tiempos