O que é vinculação de dados unidirecional no Angular

A vinculação de dados unidirecional no Angular (ou seja, vinculação unidirecional) é uma maneira de vincular dados do componente à exibição (DOM) ou vice-versa - da exibição ao componente. Ele é usado para exibir informações para o usuário final, que permanecem sincronizadas automaticamente com cada alteração dos dados subjacentes. Isso é semelhante à associação unidirecional no 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>

Em Angular, estamos vinculando diretamente uma propriedade DOM à propriedade de um 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>

Isso é muito mais poderoso do que a vinculação de dados no WPF e muito mais fácil de usar também. Podemos até fazer cálculos matemáticos dentro da expressão do modelo. Por exemplo, podemos simplesmente colocar 2 + 2 na expressão e ela exibirá o resultado, que é igual a 4:

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

Mais uma coisa que podemos fazer é vincular aos métodos reais do arquivo datilografado. Aqui está um pequeno exemplo de como conseguir isso:

<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

A vinculação de propriedade no Angular é usada para vincular valores para propriedades de destino de elementos ou diretivas HTML. A sintaxe aqui é um pouco diferente da interpolação. Com a associação de propriedade, o nome da propriedade é colocado entre colchetes e seu valor não contém chaves - apenas o nome da propriedade à qual ele está associado.

<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

Nossa comunidade é ativa e sempre acolhedora para novas ideias.