¿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?

Data binding is widely used by programmers as this type of services significantly streamlines the process of updating any UI and also reduces the amount of boilerplate when building an app. Data binding in Angular is super easy, and unlike in WPF we don't have to worry about a data context, a view model, or INotifyPropertyChanged (INPC). All we have to worry about is an HTML file and a typescript file. With any data binding, the first thing you need are properties to bind to. So let's add a property called text into the component class, and set its value. In WPF, we need to set the DataContext and bind the property in XAML:

public class IgniteUIClass
{
  public string Text  { get; set; }
  
  public IgniteUIClass()
  { 
    this.Text = "IgniteUI for Angular";
  }
}
...
public MainWindow()
{
  InitializeComponent();
  this.DataContext = new IgniteUIClass();
}

<Label Content="{Binding Path=Text, Mode=OneWay}"></Label>

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() {}
}

<h2>{{ text }}</h2>

Angular Data Binding Interpolation

In the code from above, we simply display some text in the HTML by using a binding to the value of the text property. In this case, we are using interpolation to create a one-way binding. We do this by typing double curly braces, the name of the property - in our case text, and two closing curly braces. Another way to achieve the same result is to create h2 tag and bind the text property to its innerHTML property, by using the interpolation syntax again:

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

There are two important things about interpolation.

First, everything inside the curly braces is rendered as a string.
Second, everything inside the curly braces is referred to as a template expression. This allows us to do more complex things, such as concatenation.

For example, let's concatenate some text with the value of the text property:

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

The use of template expressions allows us to bind to javascript properties and methods as well. For example, we can bind to the text property's length which will result in the number 20:

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

We can also bind to methods of that property, for example to toUpperCase():

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

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>

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>

This getTitle() is a method defined in the typescript file. The result on the page is the returned value of that method:

getTitle() {
  return 'Simple Title';
}

Although the interpolation looks quite powerful, it has its limitations, for example - it only represents a string. So let's create a simple boolean property in the component class:

export class SampleComponent implements OnInit {

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

We will now create a simple input of type text and bind the isDisabled property to the input's disabled property:

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

The expected result is that the input should be enabled, but it's disabled. This is because the interpolation returns a string, but the input's disabled property is of boolean type and it requires a boolean value. In order for this to work correctly, Angular provides 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">

By using property binding, the input's disabled property is bound to a boolean result, not a string. The isDisabled value is false and running the app would display the input as enabled.

Note

It is very important to remember that when a binding relies on the data type result, then a property binding should be used! If the binding simply relies on a string value, then interpolation should be used.

Additional Resources

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