¿Qué es el enlace de datos unidireccional en Angular

    El enlace de datos unidireccional en Angular (es decir, enlace unidireccional) es una forma de vincular datos del componente a la vista (DOM) o viceversa, de la vista al componente. Se utiliza para mostrar información al usuario final que se sincroniza automáticamente con cada cambio de los datos subyacentes. Esto es similar al enlace unidireccional en WPF.

    What is Angular data binding?

    Los programadores utilizan ampliamente el enlace de datos, ya que este tipo de servicios agiliza significativamente el proceso de actualización de cualquier interfaz de usuario y también reduce la cantidad de plantillas al crear una aplicación. El enlace de datos en Angular es muy fácil y, a diferencia de WPF, no tenemos que preocuparnos por un contexto de datos, un modelo de vista o INotifyPropertyChanged INPC. Todo lo que tenemos que preocuparnos es un archivo HTML y un archivo mecanografiado. Con cualquier enlace de datos, lo primero que necesita son las propiedades a las que enlazar. Por lo tanto, agreguemos una propiedad llamada text a la clase de componente y establezcamos su valor. En WPF, es necesario establecer DataContext y enlazar la propiedad en XAML:

    public class IgniteUIClass
{
  public string Text  { get; set; }
  
  public IgniteUIClass()
  { 
    this.Text = "IgniteUI for Angular";
  }
}
...
public MainWindow()
{
  InitializeComponent();
  this.DataContext = new IgniteUIClass();
}
csharp
    <Label Content="{Binding Path=Text, Mode=OneWay}"></Label>
xml

    En Angular, estamos vinculando directamente una propiedad DOM a la propiedad de un componente:

    export class SampleComponent implements OnInit {

  text = 'IgniteUI for Angular';

  constructor() { }
  ngOnInit() {}
}
typescript
    <h2>{{ text }}</h2>
html

    Angular Data Binding Interpolation

    En el código anterior, simplemente mostramos algo de texto en HTML mediante un enlace al valor de la propiedad text. En este caso, utilizamos interpolation para crear un enlace unidireccional. Hacemos esto escribiendo llaves dobles, el nombre de la propiedad (en nuestro caso text) y dos llaves de cierre. Otra forma de lograr el mismo resultado es crear la etiqueta h2 y vincular la propiedad text a su propiedad internalHTML, usando nuevamente la sintaxis interpolation:

    <h2 innerHTML="{{ text }}"></h2>
html

    Hay dos cosas importantes acerca de interpolation.

    • Primero, todo lo que está dentro de las llaves se representa como una string.
    • En segundo lugar, todo lo que está dentro de las llaves se denomina template expression. Esto nos permite hacer cosas más complejas, como la concatenación.

    Por ejemplo, concatenemos algo de texto con el valor de la propiedad text:

    <h2>{{"Welcome to " + text }}</h2>
html

    El uso de expresiones de plantilla también nos permite vincularnos a propiedades y métodos de JavaScript. Por ejemplo, podemos vincular la longitud de la propiedad text, lo que dará como resultado el número 20:

    <h2>{{ text.length }}</h2>
html

    También podemos vincularnos a métodos de esa propiedad, por ejemplo a toUpperCase():

    <h2>{{ text.toUpperCase() }}</h2>
html

    Esto es mucho más poderoso que el enlace de datos en WPF y también mucho más fácil de usar. Incluso podemos realizar cálculos matemáticos dentro de la expresión de plantilla. Por ejemplo, podemos simplemente poner 2 + 2 en la expresión y mostrará el resultado, que es igual a 4:

    <h2>{{ 2 + 2 }}</h2>
html

    Una cosa más que podemos hacer es vincularnos a métodos reales desde el archivo mecanografiado. A continuación se muestra un breve ejemplo de cómo lograrlo:

    <h2>{{ getTitle() }}</h2>
html

    Este getTitle() es un método definido en el archivo mecanografiado. El resultado en la página es el valor devuelto de ese método:

    getTitle() {
  return 'Simple Title';
}
typescript

    Aunque la interpolation parece bastante poderosa, tiene sus limitaciones, por ejemplo: solo representa una cadena. Entonces, creemos una propiedad booleana simple en la clase de componente:

    export class SampleComponent implements OnInit {

  text = 'IgniteUI for Angular';
  isDisabled = false;
  constructor() { }
...
typescript

    Ahora crearemos una input simple de tipo texto y vincularemos la propiedad isDisabled a la propiedad disabled de la entrada:

    <input type="text" disabled="{{ isDisabled }}">
html

    El resultado esperado es que input debería estar habilitado, pero está deshabilitado. Esto se debe a que interpolation devuelve una cadena, pero la propiedad disabled de la entrada es de tipo booleano y requiere un valor booleano. Para que esto funcione correctamente, Angular proporciona property binding.

    Angular Property Binding

    El enlace de propiedades en Angular se utiliza para vincular valores para propiedades de destino de elementos o directivas HTML. La sintaxis aquí es un poco diferente a la de la interpolación. Con la vinculación de propiedades, el nombre de la propiedad está entre corchetes y su valor no contiene llaves, solo el nombre de la propiedad a la que está vinculada.

    <input type="text" [disabled]="isDisabled">
html

    Al utilizar el enlace de propiedad, la propiedad disabled de la entrada está vinculada a un resultado booleano, no a una cadena. El valor isDisabled es falso y al ejecutar la aplicación se mostrará la entrada como habilitada.

    Es muy importante recordar que cuando un enlace se basa en el resultado del tipo de datos, entonces se debe utilizar un property binding. Si el enlace simplemente se basa en un valor de cadena, entonces se debe utilizar interpolation.

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.