One-way data binding in Angular (i.e. unidirectional binding) isa way to bind data from the component to the view (DOM) . It is used to display information to the end-user which automatically stays synchronized with each change of the underlying data. This is similar to the one-way binding in 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. 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>In Angular, we are directly binding a DOM property to a component’s property:
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>Angular Property Binding
Property binding in Angular is used to bind values for target properties of HTML elements or directives. The syntax here is a bit different than that of interpolation. With property binding, the property name is wrapped into square brackets, and its value does not contain curly braces – just the name of the property that it is bound to.
<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.
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.
