Skip to content
Related Articles

Related Articles

Improve Article

String Interpolation in Angular 8

  • Last Updated : 31 Aug, 2020

String Interpolation in Angular 8 is a one-way data-binding technique that is used to transfer the data from a TypeScript code to an HTML template (view). It uses the template expression in double curly braces to display the data from the component to the view. String interpolation adds the value of a property from the component to the HTML template view.

Syntax:

{{ component_property }}

Approach: 

  • Define a property in the app.component.ts file containing some string value.
  • In the app.component.html file, bind the value of that property by calling the property name in double curly braces {{ property_name }}.

Example 1: 

  • app.component.html



    HTML




    <h1>
      {{ title }}
    </h1>
  • app.component.ts

    Javascript




    import { Component } from '@angular/core';    
    @Component({    
      selector: 'app-root',    
      templateUrl: './app.component.html',    
      styleUrls: ['./app.component.css']    
    })    
    export class AppComponent {   
      title = "GeeksforGeeks";
    }

Output:

Example 2:

  • app.component.html

    HTML




    <h1 [style.color] = "'green'" 
        [style.text-align] = "'center'" >
        {{ title }} : {{ about }}
    </h1>
  • app.component.ts

    Javascript




    import { Component } from '@angular/core';    
    @Component({    
      selector: 'app-root',    
      templateUrl: './app.component.html',    
      styleUrls: ['./app.component.css']    
    })    
    export class AppComponent {   
      title = "GeeksforGeeks";
      about = "Computer Science Portal for Geeks";
    }

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :