Home » String Interpolation in Angular 8 | Angular 8 String Interpolation

String Interpolation in Angular 8 | Angular 8 String Interpolation

by Online Tutorials Library

String Interpolation in Angular 8

String Interpolation is a one-way databinding technique which is used to output the data from a TypeScript code to 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.

For example:

{{ data }}

We have already created an Angular project using Angular CLI.

See: How to create Angular 8 project. Click Here

Here, we are using the same project for this example.

Open app.component.ts file and use the following code within the file:

String Interpolation in Angular 8

Now, open app.component.html and use the following code to see string interpolation.

String Interpolation in Angular 8

Now, open Node.js command prompt and run the ng serve command to see the result.

Output:

String Interpolation in Angular 8

String Interpolation can be used to resolve some other expressions too. Let’s see an example.

Example:

Update the app.component.ts file with the following code:

app.component.html:

Output:

String Interpolation in Angular 8

You can use the same application in another way:

App.component.ts:

String Interpolation in Angular 8

App.component.html:

String Interpolation in Angular 8

Output:

String Interpolation in Angular 8


You may also like