How to: Interpolation Expressions in Angular2  

An interpolation expression is wrapped in the double curly braces like this: {{title}} indicating that the expression has to be evaluated. These double curly braces are also popularly known as mustaches.

@Component({
    selector: 'shoppingcart-app',
    template: `
        <h1>Welcome to {{title}}</h1>
    `
})
export class ShoppingCartApp {
    title: string = "My Mobile Store";
}

Whenever a tag is detected in the page, Angular activates the ShoppingCartApp component and creates an instance of the ShoppingCartApp class, and this instance becomes the evaluation context of the expressions that you specify in the template property. Therefore, in our example, the title is set to 'My Mobile Store' and this is what is displayed in the browser:

<shoppingcart-app>
    <h1>Welcome to My Mobile Store</h1>
</shoppingcart-app>

Angular has a feature called Change Detection. Whenever the value of the 'title' property changes in the ShoppingCartApp instance, the value of the {{title}} interpolation expression in the HTML template will be automatically updated.

If you try to display a null variable or a variable that does not exist, Angular will display an empty string.

If you want to access the property of your component object in your template, you can do it in as follows:

@Component({
    selector: 'shoppingcart-app',
    template: `
        <h1>Welcome to {{config.title}}</h1>
    `
})
export class ShoppingCartApp {
    config: any = { title: 'My Mobile Store' };
}

Let us introduce a typo in our interpolation expression:

<h1>Welcome to {{confi.title}}</h1>

Angular 2 detects this error indicating that this property does not exist:

Cannot read property 'title' of undefined in [{{confi.title}} in ShoppingCartApp]

This type of error goes undetected in Angular 1 leaving you struggle to figure out the source of error yourself.

Consider that the config object is populated from a call that you make to the server. When the template is compiled, the config object is initialized to undefined before being set with the values that are sent from the server. You can certainly avoid this error by suffixing the ? sign to the config in your template as follows:

@Component({
    selector: 'shoppingcart-app',
    template: `
        <h1>Welcome to {{config?.title}}</h1>
    `
})
export class ShoppingCartApp {
    config: any;
}

The ?. is also referred to as Safe Navigation Operator.