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