Reinaldo Mendoza
Me parece que es mas ordenado que react, me esta gustando la sintaxis de angular
Rubén Ernesto Aragón Gil
Sí, en react es todo un show. jajaj
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
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.
Reinaldo Mendoza
Me parece que es mas ordenado que react, me esta gustando la sintaxis de angular
Rubén Ernesto Aragón Gil
Sí, en react es todo un show. jajaj
Cecilia Riveros
Este articulo hablo y da un ejejmplo sobre el property binding
https://medium.com/@yonem9/angular-qu%C3%A9-narices-es-eso-del-data-binding-y-los-pipes-f1a094eefb7f
Gerson Eddy Rodriguez Rodriguez
Muy buena expliacación.
Kenneth Leonel Cruz Ordoñez
| # | String Interpolation | Property binding |
|---|---|---|
| 1 | Ingresar contenido <p> <h2> donde es necesario renderizarlo | Son especificos para propiedades |
| 2 | Necesario para renderizar Strings | Necesario para renderizar objetos |
Brayan Daniel Chacón Arrascue
Muy claro la explicación del Property Binding, a seguir con el curso hasta ahorita 10 de 10
Jimmy Buriticá Londoño
Tienes razón, hasta ahora vamos muy bien.
Edinson Colonia Paez
String : renderiza contenido Propperty bIding: controlar y configurar propiedades
Juan Miguel Jimenez
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.
Jeisson Santiago Cortes Ortiz
que diferencia hay en que hagamos lo mismo pero usando {{ btnDisable }} o algo por el estilo?
Aaron Paredes Cabrera
Supongo que no hay una diferencia, simplemente son dos formas de hacer lo mismo, pero tal ves para un tema de orden se podría categorizar de esta forma, por un lado usar Property Binding para las propiedades de los elementos de HTML y por otro String Interpolation para pasar datos a renderizar a nuestro template.
Luis Antonio Agapito Gamarra
Mateo Echeverri Betancur
No conocía la existencia de progress tag :o jajaja
Juan R Rossano
¿String interpolation se puede usar para internacionalizar la interfase? Imagino tener todos los textos de la interfaz en un archivo por cada idioma y mediante string interpolation poner los textos en formularios, menus, ayuda y mensajes de error segun el idioma que este configurado / seleccionado.
Marco Antonio Alducin Garcia
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.
Marco Antonio Alducin Garcia
Ahora, lo que si utilice dentro de la clase Person es un this.algo para no volver a repetir contenido de otra variable dentro de un objeto de la clase, sino referenciarlos con los que son propios del componente.
Miguel Angel Reyes Moreno
¿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.
Jcastrillont
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.
Ralph Ortega
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.
Juan Casas
Es verdad xd, por que pasa eso?
Franciree Arellan
Tuve que probarlo también xD
Omar Villada
Que bien, ahora por fin entiendo la diferencia entre String Interpolation y Property Binding
German Pinilla
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)
Luis Fernando Forero Guzmán
Llegue tarde pero aqui andamos aprendiedo
Pablo Arevalo
muy buen curso, justo lo q necesitaba en estos tiempos
Julian Franco
Me surge una duda. Se debe aplciar HTML Semantico ?
Puedes notar la diferencia cuando quieres bindear valores que no son de tipo string. por ejemplo si tienes una propieda booleana:
btnDisabled = false
al usar Property Binding el botón estará habilitado porque toma el valor booleano
<button [disabled]="btnDisabled">send</button> //como se renderiza <button>send</button>
mientras que si utilizas String Interpolation el botón estará deshabilitado porque lo estará interpretando como un texto (En HTML la forma de colocar false a un atributo booleano es omitiendo el atributo)
<button disabled={{btnDisabled}}>send</button> //como se renderiza <button disabled>send</button>