Angular String Interpolation Binding

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

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

{{ templateExpression }}

There are some steps to create a String Interpolation Binding.

Step1) Suppose You create a component through the below component

ng g c string-interpolation-binding

After running 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)

Step 2) Open the component typescript file and define the string variable userName with the 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 {

  }
}

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

<div align="center">
<h1>Hello {{userName}}</h1>
</div>

Step4) Now, define the route into the 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