Angular2 Components

Angular2 is on BETA now. So its great time to explore Angular2 as Angular2 team is mostly working on new features and bug fixes so no fundamental/major changes will happen in Angular2 application.

So lets write our first Hello World application with Angular2.


<!DOCTYPE html>
    <title>Angular 2 Hello World</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
    <!-- IE required polyfills (from CDN), in this exact order -->
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <!-- 2. Configure SystemJS -->
            transpiler: 'typescript',
            typescriptOptions: {emitDecoratorMetadata: true},
            packages: {'app': {defaultExtension: 'ts'}}
            .then(null, console.error.bind(console));
<!-- 3. Display the application -->

In index.html, we are loading all required .js files e.g. Angular2, TypeScript, System.js etc. And with the help of System.config method, we are loading our main file main.ts.

We are using Type-Script therefore in System.config transpiler is typescript, and defaultExtension is ts.

Element <hello-world> tag will display Loading... till HelloWorld component does not gets loaded successfully.


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

In main.ts, we are requiring bootstrap package from angular2/platform/browser and HelloWorld package from ./hello_world.

bootstrap package bootstrap the Angular2 app with provided package.

And on third line, we are bootstrapping HelloWorld package, so this package will be available in index.html.


// Require Component package from `angular2/core` package, so Angular can recognize that it is a component.

import {Component} from 'angular2/core';

// Below is the decorator, and we define configurations in the decorator for component.


    // Defining selector for the component so that we can tag component/directive in .html file to the attached component.

    selector: 'hello-world',

    // Providing .html for the component. You can provide HTML directly with property template as we do in Angular1.X

    templateUrl: 'app/hello_world.html'

 * Following is the TypeScript Class, which will be compiled into old JavaScript Class.
 * And we are exporting it so it will be available in other files and modules.

export class HelloWorld {
    // Declaring the variable to bind with initial value
    name:string = '';

In hello_world.ts we are requiring Component package form angular2/core so Angular2 will be able to recognize that it is a component.

With @Component decorator, we are providing configuration for component. i.e. selector and templateUrl.

And in last, we are exporting Type-Script class. So this component will be available in other files and modules where it will be imported and we are defining a property name in HelloWorld class.


<!-- data-bind to the input element; store value in name -->
<input type="text" [(ngModel)]="name" placeholder="Enter a name here">
<!-- conditionally display `name` -->
<h1 [hidden]="!name">Hello {{name}}!</h1>

In hello_world.html we are doing 2-way-data binding for name property on input. And showing Hello {{name}} if name is present.

For 2-way-binding, we are using [(ngModel)] and for hiding element we are using [hidden] attribute.

Follow Me




More Blogs By Me