Angular Data Binding – Deep Dive

Angular data binding keeps the view updated based on the application state. It keeps the model and view in sync. It can also be called as the communication between the Component and the DOM.

There are primarily 2 types of data binding in Angular:
=> One-way data binding
=> Two-way data binding

One-way Data Binding

When the HTML view gets updated with changes to the model in Typescript file, it is known as one-way data binding.

One way data binding can be split into 3 ways of binding:
=> String Interpolation
=> Property Binding
=> Event Binding

i. String Interpolation

String interpolation is used to output data from the TS file to the HTML file. This is achieved by using double curly braces in the HTML.

// app.component.html
<label>My name is {{ name }}</label>

// app.component.ts
@Component({...})
export class AppComponent {
  value = 'Sam';
}

ii. Property Binding

Property binding is used to

// app.component.html
<label [value]="name"></label>
<button (click)="onButtonClick()">Change Value</button>

//app.component.ts
@Component({...})
export class AppComponent {
  value = 'Sam';
  onButtonClick() {
    this.value = 'Mohan';
  }
}

In the above example: the <label> HTML tag’s value has been bound to a property named ‘name‘ declared in the TS file. So when the page loads for the first time, the label is going to display the initial value of ‘Sam‘ which the name property has been initialized with that. But once the button is clicked (we can also do the same for any other activity), the label updates to ‘Mohan‘.

Binding to Properties of Child Components

interface IUser {
  name: string;
  age: number
}

// child.component.html
<p>User's name is {{ user?.name }}, and age is {{ user?.age }}</p>

// child.component.ts
@Component({
  selecteor: 'app-child,
})
export class ChildComponent {
  @Input() user: IUser;
}

This line will make sure that the user object can be accessed from the parent where this ChildComponent is called from.

// parent.component.html
<app-child [user]="activeUser"></app-child>

// parent.component.ts
@Component({...})
export class ParentComponent {
  activeUser: IUser = { name: 'Sam', age: 5 };
}

With the ParentComponent passing the activeUser to the user object of ChildComponent using Property Binding, now the ChildComponent can display the data. For the above scenario, the page would print

User's name is Sam, and age is 5

Assigning an Alias to Custom Properties

To use a custom property that should not be exposed to outside components, we can use an alias by passing it as a parameter to the Input decorator.

// child.component
@Input('defaultUser') user: IUser;

And this can be accessed in the ParentComponent by binding to [defaultUser].
Keep in mind that [element] will no longer work.

// parent.component.html
<app-child [defaultUser]="activeUser"></app-child>

iii. Event Binding

// child.component.ts
@Output() userCreated = new EventEmitter<IUser>();

onServerCreated(eventData: IUser) {
  this.userCreated.emit({
    name: eventData.userName,
    desc: eventData.age
  });
}

This line will make sure that the event is emitted outside from the ChildComponent to the ParentComponent so that it can be listened in the ParentComponent.

// parent.component.html
<app-child (userCreated)="onUserCreated($event)"></app-child>

// parent.component.ts
onUserCreated(event: IUser) {
  console.log(event); // This will log the information sent by the ChildComponent
}

Assigning an Alias to Custom Events

The same structure can be followed from Custom Properties to give alias to Custom Events.

// child.component.ts
@Output('newUserCreated') userCreated = new EventEmitter<IUser>();

Now to use this in the ParentComponent, we can’t use the userCreated event binding anymore, but need to use the alias, ie – newUserCreated

// parent.component.html
<app-child (newUserCreated)="onUserCreated($event)"></app-child>

We went through multiple types of Data Binding in this post. For more details on Angular, click here.