Angular 2.0 – how to build a component

shield-with-betaHow to create a simple hello-world component and use it in the index page. We will use TypeScript and Html in the example bellow. To run the example you will need the npm installed.

The structure that we will need:

  • hello_world_app
    • index.html
    • app
      • main.ts
      • hello_world.ts
    • package.json
    • tsconfig.json

The content of the each file bellow:


import {Component} from 'angular2/core';
// Declare the tag name
selector: 'hello-world',
template: `
<!-- data-bind to the input element; store value in yourName -->
<input type="text" [(ngModel)]="yourName" placeholder="Enter a name here">
<!-- conditionally display `yourName` -->
<h1 [hidden]="!yourName">Hello {{yourName}}!</h1>
export class HelloWorld {
// Declaring the variable for binding with initial value
yourName: string = '';


import {bootstrap} from 'angular2/platform/browser';
import {HelloWorld} from './hello_world';


<title>Hellow World Component</title>
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
 <script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
 <script src="node_modules/angular2/bundles/"></script>
<!-- 2. Configure SystemJS -->
 packages: { 
 app: {
 format: 'register',
 defaultExtension: 'js'
 .then(null, console.error.bind(console));
<!-- 3. Display the application -->


 "name": "angular2-quickstart",
 "version": "1.0.0",
 "scripts": {
 "tsc": "tsc",
 "tsc:w": "tsc -w",
 "lite": "lite-server",
 "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
 "license": "ISC",
 "dependencies": {
 "angular2": "2.0.0-beta.3",
 "systemjs": "0.19.6",
 "es6-promise": "^3.0.2",
 "es6-shim": "^0.33.3",
 "reflect-metadata": "0.1.2",
 "rxjs": "5.0.0-beta.0",
 "zone.js": "0.5.11"
 "devDependencies": {
 "concurrently": "^1.0.0",
 "lite-server": "^2.0.1",
 "typescript": "^1.7.5"

After creating the package.json you can open a Terminal or Command Prompt (with admin rights) and navigate to the created folder hello_world_app and type the following command:

  • npm install


 "compilerOptions": {
 "target": "es5",
 "module": "system",
 "moduleResolution": "node",
 "sourceMap": true,
 "emitDecoratorMetadata": true,
 "experimentalDecorators": true,
 "removeComments": false,
 "noImplicitAny": false
 "exclude": [

From the Terminal or Command Prompt navigate again to the folder hello_world_app and type the following command to compile the .ts files and run the application:

  • npm start

2 thoughts on “Angular 2.0 – how to build a component

  1. Pingback: Angular 2.0 – real-time components using Firebase | two lion cubs

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s