Home > Angular

Angular 2 Interpolation Expression HTML Example

By Arvind Rai, 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.

Software Used
Interpolation Expression
Project Structure
Create Components and HTML Templates using TypeScript
Create Module and Main TypeScript File
Create index.html
package.json
systemjs.config.js
Run Application
References
Download Source Code

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}}

And it prints as

Sum of 20 + 30 is  50

Interpolation accesses values of component properties. Find some examples.

{{title}}
{{primeMinister.name.lname}}

Interpolation can also be used to assign the values to tag attributes.

<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'
  } 
}

We have created title, city and primeMinister properties in our news component. These properties will be accessed in template named as 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>

Here we are evaluating component properties using interpolation. Interpolation can be used within HTML tags or without HTML tags. It can also be used for property binding. Now find the CSS used with news component.

news.component.css

h1 {
  color: #1F618D;
  font-family: Arial;
  font-size: 200%;
}
p {
  color: #424949;
  font-family: sans-serif;
  font-size: 100%;
}

Now find second component, HTML template and CSS file for mathematical calculations.

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';
 }

math.component.html

<h2> {{title}} </h2>

Sum of 15 + 23 is {{15 + 23}} <br/>

Multiplication of 23 * 12 is {{23 * 12}}

math.component.css

h2 {
  color: #800000;
  font-family: Arial;
  font-size: 150%;
}

Now finally both news and math components will be referred in app component as follows.
app.component.ts

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
	        <news-app> </news-app>
		<math-app> </math-app>					
	      `
})
export class AppComponent { }

Here we are creating two tags <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 { }

Here we are declaring all components which we have created such as news component, math component and app component. As we have referred the selector of news and math component in our app component, we are bootstrapping only app component. Now find the main typescript file to run the application where we are referring our module.

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.