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'
  };
}

No comments:

Post a Comment

Download the eBook of react js for beginners

ReactJS basically is an open-source JavaScript library which is used for building user interfaces specifically for single page applications...

Popular