Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

angular
communitycreator

What is String Interpolation in Angular 7?

Shanzay Gauhar

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The Angular 7 String Interpolation is used to render dynamic data on the HTML template at the user end. In string interpolation, the value flows in one direction, i.e., from components to html elements. String interpolation is used for one way data binding. However, Angular’s data binding is a valuable feature that allows us to communicate between the component and its view.

One way data binding

When we use interpolation and change the value of the bound field, the changes are also reflected on the page/HTML. The component HTML template uses an object of the component class as the data context for its template – that’s why the value that is intended to be bound on the view must be allocated to the component class field.

The structure of a basic Angular project is:

  • component.css - styles or CSS based upon our requirements is specified in this file.
  • component.html - HTML code is specified in this file.
  • component.spec.ts - file is used for testing.
  • component.ts - consists of business logic for linking the code to HTML. Values defined in this file can be referenced in the HTML file using curly brackets to enable data binding.

In order to successfully implement string interpolation, modify the component.ts file, and the changes will be reflected in component.html file as it will fetches the data from component.ts file for its HTML template

Example

This is a basic simple implementation of string interpolation specifying changes in only the app.component.ts and app.component.html file. The comments in the code identify some of the different operations in interpolation.

app.component.ts

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Edpresso Readers";
  Myname = "Shanzay Gauhar";
  city = "I live in Lahore";
  //binding properties in interpolation
  shot = {
    name: "String Interpolation",
    date: "29 April,2021",
    country: "Pakistan"
  };
}

app.component.html

<div>
<!--Simple interpolation-->
<h2> Hello {{name}}!</h2>
</div>
<div>
<!--Concatenation of fields in interpolation: variable + variable-->
My name is {{Myname +". " + city}}
<!--Another concatenation Example: static + variable -->
<br>
{{'Hope you are all fine! ' + name}}
</div>
<div>
<!--basic without any error handling-->
Name of the shot: {{shot.name}}
<br>
<!--error handling: ensures presence of the property value's in an object-->
Last Modified: {{shot && shot.date}}
<br>
<!--safe navigation operator: it securely connects internal fields-->
Country: {{shot?.country}}
</div>
app.component.html

Output

In the example above, variablessuch as Myname, city, name, etc. in the curly braces are taken by Angular from the component. Curly braces (like this, {{ variable }}) are used to specify interpolation.

String interpolation is a good substitute for property binding. It is preferred when we have to perform string concatenation. while property binding is more suitable for setting an element property to a non-string data value.


RELATED TAGS

angular
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring