Tuesday, 16 January 2018

Angular 5 Template Expressions and Interpolation

Interpolation use the {{ expression }} to render the value to the template.Interpolation uses template expressions in double curly braces to display data from the component class and template reference variables.

Interpolation with Curly Braces :

{{ }} contain template expressions which allow us to read object values from component properties.Double curly braces are similar to javascript and include feature such as ternery operator,concatenation and airthmetic.


import { Component } from '@angular/core';

@Component({
  selector: 'app-employee',
  template: `
    <h2>{{heading}}</h2>
    <p>
      Name: {{employee.sex === 'm' ? 'Mr' : 'Ms'}}
      {{employee.name.first + ' ' + employee.name.surname}}
    </p>`
})
export class EmployeeComponent {

  heading = 'Employee Details';

  employee: any = {
    name: {
      first: 'John',
      surname: 'Doe'
    },
    sex: 'm'
  };
}

Featured post

How to create dynamic schema in mongodb

Sometime what we need in our application is to create mongodb schema for collection and some of our collection schema are same but names are...

Popular Posts