Angular String Interpolation Binding

Angular String Interpolation Binding is used to bind the data from component to the view. Basically we use string Interpolation Binding to bind the dynamic data.

Angular String Interpolation bind through the {{ }} (double curly braces) in the template file. The syntax is as shown below


{{ templateExpression }}

There are some steps to create String Interpolation Binding.

Step1) Suppose You create a component through below component


ng g c string-interpolation-binding

After run this command 4 files are created and one module file is updated.


CREATE src/app/string-interpolation-binding/string-interpolation-binding.component.html (43 bytes)
CREATE src/app/string-interpolation-binding/string-interpolation-binding.component.spec.ts (768 bytes)
CREATE src/app/string-interpolation-binding/string-interpolation-binding.component.ts (362 bytes)     
CREATE src/app/string-interpolation-binding/string-interpolation-binding.component.scss (0 bytes)     
UPDATE src/app/app.module.ts (1251 bytes)

Step2) Open the component typescript file and define the string variable userName with value John.


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

@Component({
  selector: 'app-string-interpolation-binding',
  templateUrl: './string-interpolation-binding.component.html',
  styleUrls: ['./string-interpolation-binding.component.scss']
})
export class StringInterpolationBindingComponent implements OnInit {

  userName = 'John';
  constructor() { }

  ngOnInit(): void {

  }
}

Step3) Now, open the component html file and add the below code.


Hello {{userName}}

Step4) Now, define the route into app-routing.module.ts file


import { StringInterpolationBindingComponent } from './string-interpolation-binding/string-interpolation-binding.component';
const routes: Routes = [
  {path:'string-interpolation-binding', component:StringInterpolationBindingComponent}
];

Step5) Now, open the URL


http://localhost:4200/string-interpolation-binding

Step6) Now, you can get the output