In this article we’ll see how to do Angular one way data binding using string interpolation. As the name itself suggests Angular one-way binding is unidirectional and using String interpolation you can bind data from the component to the view.
String interpolation – Angular data binding
The string interpolation binding is specified using pairs of curly braces {{ property/expression }}. The property or expression given in between the curly braces is evaluated and resolved to its value.
String interpolation expression can be:
- property {{ message }} or {{ user.name }}
- expression {{7 + (8/4)}}
- method call {{getData()}}
- String {{‘Hello ’ + ‘World’}}
Angular String Interpolation One-way data binding example
In the example we’ll use a User model with fields as Name and Age. Using String interpolation binding, values of these fields are displayed in the HTML.
user.model.ts
export class User {
name : string;
age : number;
constructor(name: string, age : number) {
this.name = name;
this.age = age;
}
}
user.component.ts
import {
Component
} from '@angular/core';
import { User } from './user.model';
@Component({
selector: 'app-user',
templateUrl: './user.component.html'
})
export class UserComponent {
user: User;
message = 'User Details';
constructor(){
this.user = new User('Jack', 56);
}
}
UserComponent uses User model so that is imported. In the Constructor an instance of User is created. There is also a message property with value assigned to it.
In a real application you may get the User data using http request from some backing application but here it is hard coded.
user.component.html
<div class="container">
<div class="row">
<div class="col-xs-10">
<h3>{{ message }}</h3>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label>Name: </label> {{ user.name }}
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label>Age: </label> {{ user.age }}
</div>
</div>
</div>
Note that in the template, Bootstrap is used for styling. Refer this post to see how to include Bootstrap in your Angular application- How to Add Bootstrap to Angular Application
app.component.html
In app.component.html we just need to add the <app-user> tag.
<app-user></app-user>
As you can see here value for message property as well as for user.name and user.age is derived using String interpolation data binding.
One thing to note here is that value you get by String interpolation is always of type String. So user.age which is of type number is internally converted to String.
Calling a method using Angular One-way data binding
As mentioned above you can also call a method in between the curly braces and also use a String. To demonstrate that let’s remove message property and add a method getMessage() in the component.
export class UserComponent {
user: User;
constructor(){
this.user = new User('Jack', 56);
}
getMessage(){
return 'User Details';
}
}
And the corresponding changes in the template to get the message by calling method.
<h3>{{ getMessage() }}</h3>
Also notice the <label>{{'Name:'}} </label> showing how you can use String interpolation with String value.
<div class="container">
<div class="row">
<div class="col-xs-10">
<h3>{{ getMessage() }}</h3>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label>{{'Name:'}} </label> {{ user.name }}
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label>Age: </label> {{ user.age }}
</div>
</div>
</div>
That's all for this topic Angular One-Way Data Binding Using String Interpolation. If you have any doubt or any suggestions to make please drop a comment. Thanks!
>>>Return to Angular Tutorial Page
Related Topics
You may also like-