How to Use One-Time Data Binding in Angular 2+

1. the Component to the View
2. Steps to Use One-Time Data Binding in Angular 2+

In Angular 2+, one-time data binding only updates the view when there is a change in the model or any input properties. This type of data binding reduces unnecessary updates to the view, leading to better performance and less work for your computer.

The unidirectional nature of one-way data binding is evident. You can only link data from one component or view to another.

the Component to the View

Several data binding strategies employ one-way data binding to connect data from a component to a view.

Property Binding

This technique allows you to bind an HTML element’s property to an object property in the model. It entails changing a component’s property value and wrapping that value to an HTML element in the same view.

For toggle functionality and data exchange between members, we use Property Binding.

Attribute Binding

With this technique, we can bind an HTML element’s attribute to an object property in the model and specify which attribute value gets updated when a change occurs.

Class Binding

This technique binds DOM elements to AngularJS classes and allows updating them with data from the model.

Interpolation Binding

The interpolation method allows the user to attach a value to a user interface element. Interpolation binds data in a one-way process, so data flows from components to HTML elements in just one manner.

Steps to Use One-Time Data Binding in Angular 2+

This section will show you how to use one-way data binding in Angular 2+.

Example (TypeScript):

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    demo = 'Write something here'
}

Example (HTML):

<h1>Example of Angular One way Data Binding</h1>
<textarea id="hello" name="demo" class="form-control" (change)="demo = $event.target.value"></textarea>
{{demo}}

Click here to check the live demonstration of the code as mentioned above.