AngularJS 2.0 From Beginning - Input Data Binding - Day Four

I am here to continue the discussion around AngularJS 2.0. Today, we will discuss input data binding in AngularJS 2. Also, in case you did not have a look at the previous articles of this series, go through the links, mentioned below.

• AngularJS 2.0 From Beginning - Introduction of AngularJS 2.0
• AngularJS 2.0 From Beginning - Component (Day 2)  
• AngularJS 2.0 From Beginning - Data Binding (Day 3) 
  

In my previous article, I already discussed about the different processes of data binding techniques in Angular 2.0. Now, in this article, I will discuss about the process through which we can pass information or values within a component. Since in Angular 2.0, components are the core objects of the Angular framework, it is very common concern for all of us that how we can pass the data into the component in order for us to dynamically manipulate or configure the component. In the world of web development, static components will not fulfill all our requirement. So for that reason, we need to develop dynamic component or non-static component which can take data from its parent component.

Component Hierarchy

Angular 2.0 is actually made of a nested or hierarchical component structure – that means Angular 2.0 basically begins with a root component which contains all the child components of the application. Components act as self-contained because normally, we want to encapsulate our component variables and functions; and we never want that the other code to arbitrary reaches our code or value to check the changes, done in the component. Also, as a developer, I always want that our component should not hamper any other component objects used in other areas or along with my components. At the same time, component may need to share data. In Angular 2.0, a component can receive any type of data from its parent component as a receiving component.

In the above structure, each cycle structure represents a component and technically, this presentation is called as graph – a data structure, consisting of nodes and its connecting edges. The line structure represents the data flow from one component and as we can see, the data flow is in one direction i.e. from top to downwards (means from parent component to child components). This kind of structure always has some important advantages :- i.e. it is very much predictable and also it is simple to traverse and it is very easy to understand what has happened when a change is made in the parent component. In Angular point of view, when data changes in the parent node, it is very easy to find what changes are occurred in the child component.

For implementing this concept, Angular 2.0 introduces a property of @component decorator, to pass the data from parent component to child components. In Angular 2, we also can specify the data type of input data so that parent component can always pass the proper data to the child component. For defining input property of a component, we need to remember the following points. 

1. The input property is passed to the @component decorator to pass the data.
2. The component displays the input property in the view, but when we want to access the input property within the constructor of the constructor, then we found that it is not defined yet. This is because input properties are not available until the view has rendered which happened after the constructor function execution. Basically the values of input properties can be found either within ngOnInit() or ngAfterViewInit().

To declare input property, we need to first import the input command from Angular core module and then, use @Input decorator for declaring that property. @Input decorator takes a string type argument for specify the custom property name to provide custom component attribute name.

For demonstrating this input, we basically create an email register component as a child component and then place that component within a parent component page to pass input values. For this, create the below mentioned files.

Step 1

Create a TypeScript file named app.component.emailbox.ts and write down the below code. 

import { Component, Input } from '@angular/core';

@Component({
    selector: 'email-box',
    template:'<input placeholder="{{email}}"/><button class="btn-clear">Register</button>'
})

export class EmailBoxComponent {

    @Input('place-holder')
    email: string = "Type your email..";
}

Step 2

Now, create another TypeScript file called app.component.parent.ts and write down the below code.

import { Component, OnInit } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.parent.html',
})

export class ParentComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

Step 3

Now, create an HTML file named app.component.parent.html and write down the below code.

<div>
    <h1 class="badge">For subscription, register you email address :</h1>
    <br />
    <br />
    <email-box></email-box><br />
    <email-box [place-holder]="'Put your email'"></email-box><br />
    <email-box place-holder="Put your office email"></email-box><br />
</div>

Here, place-holder basically is the input property which takes the place holder value of the text box. 

Step 4

Now, create another TypeScript file named app.module.ts and write down the below code.

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { ParentComponent } from './src/app.component.parent';
import { EmailBoxComponent } from './src/app.component.emailbox';

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [ParentComponent, EmailBoxComponent],
    bootstrap: [ParentComponent]
})
export class AppModule { }

Step 5

Now, create another TypeScript file named main.ts and write down the below code.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Step 6

Now, create another HTML file named index.html and write down the below code.

<!DOCTYPE html>
<html>
  <head>
    <title>Angular2</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../styles.css">

    <!-- Polyfill(s) for older browsers -->
    <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>

    <script src="../systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Now, run the index.html file in the browser and see the out put.

 

Here, 

Now, we want to simply update the email register component with event handling. For this, do the following.

Step 1

First, add another TypeScript file named app.component.emailboxevent.ts and write down the below code.

import { Component, Input } from '@angular/core';

@Component({
    selector: 'email-box-event',
    template: '<input placeholder="{{email}}" #emailbox/><button class="red" (click)="register(emailbox)">Register</button>',
    styles: [".red {color:red;}"]
})

export class EmailBoxEventComponent {
    @Input('place-holder')
    email: string = "Type your email..";

    register(txtEmail) {
        console.log('Email Address resgister properly...');
        if (txtEmail.value == '') {
            alert('Put your email address first..');
            return;
        }
        else {
            alert('Your email address is :' + txtEmail.value);
            txtEmail.value = '';
        }
    }
}

Step 2

Now, add another TypeScript file for another type of email register component with the name app.component.emailregister.ts and add the below code.

import { Component, Input } from '@angular/core';

@Component({
    moduleId : module.id,
    selector: 'email-register',
    templateUrl: './app.component.emailregister.html',
    styleUrls: ['../style/style.css']
})

export class EmailRegisterComponent {
    @Input('caption1') caption1: string = '';
    @Input() caption2: string = '';

    name: string = '';
    email: string = '';

    register() : void {
        if (this.name != '' && this.email != '') {
            alert(this.name + ' Your email address ' + this.email + ' has been register.');
            this.clear();
        }
        else {
            alert('Fill all the fields')
        }
    }

    clear(): void {
        this.name = '';
        this.email = '';
    }
}

Step 3

Now, add an HTML file named app.component.emailregister.html and add the below code.

<div style="width:40%;">
    <fieldset>
        <h2>Email Registeration</h2>
        <table style="width:100%">
            <tr>
                <td><span>{{caption1}}</span></td>
                <td><input type="text" [(ngModel)]="name" /></td>
            </tr>
            <tr>
                <td><span>{{caption2}}</span></td>
                <td><input type="text" [(ngModel)]="email" /></td>
            </tr>
            <tr>
                <td><input type="button" value="Register" class="blue" (click)="register()"/></td>
                <td><input type="button" value="Cancel" class="red" (click)="clear()" /></td>
            </tr>
        </table>
    </fieldset>
</div>

Step 4

Change the code of app.component.parent.html file as below.

<div>
    <h1 class="badge">For subscription, register you email address :</h1>
    <br />
    <br />
    <email-box></email-box><br />
    <email-box [place-holder]="'Put your email'"></email-box><br />
    <email-box place-holder="Put your office email"></email-box><br />
</div>

<div>
    <br />
    <h2>Email Register control with Events</h2>
    <email-box-event [place-holder]="'Put your email'"></email-box-event><br />
    <hr />
    <br />
    <email-register [caption1]="'Your Name'" caption2="Email Id"></email-register>
</div>

Step 5

Change the code of app.module.ts file as below.

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { ParentComponent } from './src/app.component.parent';
import { EmailBoxComponent } from './src/app.component.emailbox';
import { EmailBoxEventComponent } from './src/app.component.emailboxevent';
import {  EmailRegisterComponent } from './src/app.component.emailregister';

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [ParentComponent, EmailBoxComponent, EmailBoxEventComponent, EmailRegisterComponent],
    bootstrap: [ParentComponent]
})
export class AppModule { }

Now, write down the below code and the output as below.