Angular 2 Interpolation Expression HTML Example
November 06, 2016
This page will walk through angular 2 interpolation expression HTML example. Interpolation is represented using double-curly braces. Using Interpolation we evaluate expressions. The component properties, mathematical calculation etc are executed within interpolation. It is also used for data binding. Interpolation can be used within HTML tag. It also assigns the value to tag attributes. Here on this page we will provide demo with two components and those are news and math component. In news component interpolation is executing component properties and math component is performing mathematical calculation. Now find the complete interpolation expression example step by step using TypeScript.
Contents
Software Used
Find the software used in our demo.1. Angular 2.3.0
2. TypeScript 2.0.10
3. Node.js 4.6.0
4. NPM 3.10.8
5. Firefox 50.1.0
Interpolation Expression
Angular uses double-curly braces {{ }} to represent interpolation. Interpolation executes expression. Suppose we want to do mathematical calculation, we can perform it as follows within HTML template.Sum of 20 + 30 is {{20 + 30}}
Sum of 20 + 30 is 50
{{title}} {{primeMinister.name.lname}}
<img src="{{imageUrl}}">
Project Structure
Find the project structure of our demo.angular2-demo | --->app | --->app.component.ts --->app.module.ts --->main.ts --->math.component.ts --->news.component.ts --->news.component.html --->math.component.html --->news.component.css --->math.component.css --->node_modules --->index.html --->package.json --->systemjs.config.js --->tsconfig.json
Create Components and HTML Templates using TypeScript
For the demo we are creating two components, one for news and second for mathematical calculation. Both components will have separate HTML template and CSS files. Now first find the news component.news.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'news-app', templateUrl: 'app/news.component.html', styleUrls: ['app/news.component.css'] }) export class NewsComponent { title = 'Latest News'; city = 'Varanasi'; primeMinister = { name: { fname : 'Narendra', lname : 'Modi' }, gender : 'M' } }
news.component.html
. Find the HTML file.
news.component.html
<h1> {{title}} </h1> <p> The Prime Minister {{primeMinister.gender == 'M'? 'Mr.' : 'Ms.'}} {{primeMinister.name.fname}} {{primeMinister.name.lname}} visited {{city}}. </p>
news.component.css
h1 { color: #1F618D; font-family: Arial; font-size: 200%; } p { color: #424949; font-family: sans-serif; font-size: 100%; }
math.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'math-app', templateUrl: 'app/math.component.html', styleUrls: ['app/math.component.css'] }) export class MathComponent { title = 'Math Calculation'; }
<h2> {{title}} </h2> Sum of 15 + 23 is {{15 + 23}} <br/> Multiplication of 23 * 12 is {{23 * 12}}
h2 { color: #800000; font-family: Arial; font-size: 150%; }
app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <news-app> </news-app> <math-app> </math-app> ` }) export class AppComponent { }
<news-app>
for news component and <math-app>
for math component. The HTML code assigned to template should be closed by (`) which is near to escape button on our keyboard.
Create Module and Main TypeScript File
Now we will create our module.app.module.ts
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { NewsComponent } from './news.component'; import { MathComponent } from './math.component'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent, NewsComponent, MathComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule);
Create index.html
<html> <head> <title>Angular 2 Demo</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <!-- Configure SystemJS --> <script src="systemjs.config.js"></script> <script> System.import('myApp').catch(function(err){ console.error(err); }); </script> </head> <body> <my-app>Please Wait...</my-app> </body> </html>
package.json
{ "name": "angular-demo", "version": "1.0.0", "scripts": { "start": "tsc -w" }, "dependencies": { "@angular/common": "~2.3.0", "@angular/compiler": "~2.3.0", "@angular/core": "~2.3.0", "@angular/forms": "~2.3.0", "@angular/http": "~2.3.0", "@angular/platform-browser": "~2.3.0", "@angular/platform-browser-dynamic": "~2.3.0", "@angular/router": "~3.3.0", "angular-in-memory-web-api": "~0.2.1", "systemjs": "0.19.40", "core-js": "^2.4.1", "reflect-metadata": "^0.1.8", "rxjs": "5.0.0-rc.4", "zone.js": "^0.7.2" }, "devDependencies": { "typescript": "~2.0.10" } }
systemjs.config.js
(function (global) { System.config({ paths: { 'npm:': 'node_modules/' }, map: { myApp: 'app', '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', }, packages: { myApp: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, 'angular-in-memory-web-api': { main: './index.js', defaultExtension: 'js' } } }); })(this);
Run Application
Find the steps to run the example.1. Install Node.js and NPM in the system if not already installed. Make sure that Node.js version must be 4.x.x or higher and NPM version must be 3.x.x or higher.
2. Download the source code using download link given below in the example.
3. Go to the root folder of the project using command prompt and run npm install command.
4. Now run npm start command.
5. Now run index.html file. Find the print screen of the output.

References
Angular 2: InterpolationGetting Started with Angular 2 using TypeScript Step by Step Example