Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8

Conclusion

Angular 8 Conclusion

String Interpolation in Angular 8

String Interpolation in Angular 8

String interpolation is a one-way data-binding technique which is used to output the data from a typescript code to HTML template. It uses the template expression. It uses the template expression in double curly braces {{ }} to display the data from component to view.

String interpolation adds the value of the property from the component. It allows the user to bind the value to a UI element.

Interpolation binds the data one-way.

Interpolation binds the data one-way.

Syntax:

{{data}}

We have firstly created an Angular project using Angular CLI.

The syntax of binding a field using double curly braces is called Binding Expression.

String interpolation uses template expressions in double curly {{ }} braces to display data from the component, the syntax {{ }}, also known as moustache syntax. The {{ }} contains a javascript expression which can be run by angular, and the output will be inserted into the HTML.

If we put {{5+5}} in the template ten will be inserted into the HTML.

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

import {Component} from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl:’./app.component.html’, 
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title=’string interpolation in tutorialandexample’;
} 
String Interpolation

Now, open app.component.html file in the project and use the following code to see String Interpolation.

{{ title}}

open Node.js command prompt and run the ng serve

Now, open Node.js command prompt and run the ng serve –open to open the localhost: 4200 to see the output of the program.

String interpolation can be used to solve

String interpolation can be used to solve some other expression too. Let's see another example.

Example:

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

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Data binding example using String Interpolation';
numberA: number = 10;
numberB: number = 20;
}
App Component Html

app.component.html:

Calculation is : {{ numberA + numberB }}

Angular 8 String Intregation

Output:

String intregation with Angular 8

We can use the same application in another way also.

app.component.ts:

import { Component } from '@angular/core'; 
@Component({
selector: 'app-root', 
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Data binding example using String Interpolation';
numberA: number = 10;
numberB: number = 20;
addTwoNumbers() {  
return this.numberA + this.numberB;
} 
}
same application in another way also

app.component.html:

Calculation is : {{ numberA + numberB }}

Angular 8 intergration

Output:

String intregation with Angular 8



ADVERTISEMENT
ADVERTISEMENT