Angular 2.0 – how to build a component

Posted on by

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:

hello_world.ts:

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

main.ts:

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

index.html

<html>
<head>
 
<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/angular2.dev.js"></script>
 
<!-- 2. Configure SystemJS -->
<script>
 System.config({
 packages: { 
 app: {
 format: 'register',
 defaultExtension: 'js'
 }
 }
 });
 System.import('app/main')
 .then(null, console.error.bind(console));
 </script>
 
</head>
 
<!-- 3. Display the application -->
<body>
<hello-world>Loading...</hello-world>
</body>
 
</html>

package.json:

{
 "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

tsconfig.json:

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

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”

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

Leave a comment