Angular One-Way Data Binding Using String Interpolation

In this article we’ll see how to do Angular one way data binding using string interpolation. As the name itself suggests one-way data 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 for these fields are displayed from 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(){
      console.log('In constructor UserCOmponent');
      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>

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.

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(){
      console.log('In constructor UserCOmponent');
      this.user = new User('Jack', 56);
    }

    getMessage(){
      return 'User Details';
    }
}

<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!

Related Topics

1. Angular Project Structure With File Description
2. Creating New Component in Angular
3. Angular ngClass Directive With Examples

You may also like-

1. Angular @Input and @Output Example
2. Angular Disable Button Example
3. Just In Time Compiler (JIT) in Java
4. Dependency Injection in Spring Framework
5. Transaction Management in Spring
6. Installing Anaconda Distribution On Windows