Welcome Guest! (App Version 3.1)

websitnero logo name

String Interpolation

String Interpolation in Angular

String-Interpolation is the prossess where a value inside mustach-tags {{}} is caluclated and later replaced as string on the view (.html).

In angular whatever variable that you have taken in the logic file (.ts) can be fetched and even manipulated with the help of mustache-tags using "String Interpolation".

-- Mustache tags can be said to be placeholders yeielding final value after calculation.

Practical Example of "String Interpolation"

Please follow the mentioned steps:

  1. Create a compennt named 'home'
  2. Add the home component in the app.component.html file removing all boilerplate code there.
  3. Create 2 strings, 2 numbers, 1 array of colors, and 1 array containing information about 5 students - with all these variables we will demonstrate String Interpolation.

home.component.html

<p>{{string1}}</p>

<p>{{string1 + string2}}</p>

<hr/>

<p>{{num1 + num2}}</p>

<p>{{num1 * num2}}</p>

<hr/>

<p *ngFor="let x of colors">{{x}}</p>

<hr/>

<p *ngFor="let x of students">{{x.name}}, {{x.country}}, {{x.age}}</p>

home.component.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  string1: String = 'Peter';
  string2: String = 'Martin';
  num1: Number = 5;
  num2: Number = 10;
  colors = ['red', 'green', 'blue', 'orange', 'pink'];
  students = [
    {name: 'Peter', country: 'USA', age: 29},
    {name: 'Lily', country: 'UK', age: 19},
    {name: 'Robert', country: 'Canada', age: 47},
    {name: 'Rose', country: 'UK', age: 17},
    {name: 'Albert', country: 'Austria', age: 33}
  ];

  constructor() { }

  ngOnInit() {
  }

}
  1. You'll get the following result.

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.