Angular 2 – Parent-Child Components Explained with Code Examples

0
This article represents concepts and code examples for creating parent-child components. Following image represents the view which is referred in the code samples below.
calvinhobbes2
Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.

Following is explained later in this blog.

  • A parent component, HelloWorld and the interaction with Child Component, UserComponent
  • A child component, UserComponent
  • An interface User

 

Parent Component, HelloWorld, interaction with Child Component, UserComponent

A parent component, HelloWorld, represents the view consisting of Hello message and a textfield for user to interact with the view. The Hello message looks like <h1>Hello, <user [value]=”user”></user>&t;/h1>. Notice that the user object is passed to the child component, User. Following code represents the HelloWorld. Notice the following:

  • Structural components such as Component, View are imported.
  • User Interface is imported. User interface is primarily a contract for creating a User object. The User interface is used both in parent and child components. Following is the code for interface:
    export interface User {
    id: number,
    name: string,
    email: string,
    address: string
    }
    
  • Child component UserComponent is imported. Check below the code for UserComponent.
  • Child component user binds property “value” with user object. Note the code, [value]=”user”.
  • The object is type user is created as part of HelloWorld component. Check the code such as following:
    public user: User = {
    id: 1,
    name: 'Calvin Hobbes',
    email: 'calvin.hobbes@gmail.com',
    address: 'California, USA'
    };
    
  • The UserComponent is defined as part of “directives” property of Component decorator definition.
import {Component, View} from 'angular2/core';
import {User} from './user';
import {UserComponent} from './user.component';
import {bootstrap} from 'angular2/platform/browser';

@Component({
selector: 'hello-text'
})
@View({
template: `<h1>Hello, <user [value]="user"></user></h1>
<hr/>
<div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Your Name</label>
<input type="text" class="form-control" [(ngModel)]="user.name" placeholder="Enter your name...">
</div>
</form>
</div>
`,
directives: [UserComponent]
})
export class HelloWorld {
public user: User = {
id: 1,
name: 'Calvin Hobbes',
email: 'calvin.hobbes@gmail.com',
address: 'California, USA'
};
};
bootstrap(HelloWorld);

 

Child Component, UserComponent

Pay attention to following in the code given below:

  • User interface is imported
  • The component property, value, is specified of the type, User.
  • The Component property “inputs” is used to list the property which is used to receive the value from parent. In this case, it is “value” property.
import {Component, View} from 'angular2/core';
import {User} from './user';

@Component({
selector: 'user',
inputs: ['value']
})
@View({
template: '{{value.name}}'
})
export class UserComponent {
value: User;
}

 

Interface, User

Note the following in the code given below:

  • “export” keyword is used to allow modules to use User interface.
  • Interface defines properties of the User object.
export interface User {
id: number,
name: string,
email: string,
address: string
}

 

Ajitesh Kumar

Ajitesh Kumar

Ajitesh is passionate about various different technologies including programming languages such as Java/JEE, Javascript, PHP, .NET, C/C++, mobile programming languages etc and, computing fundamentals such as application security, cloud computing, API, mobile apps, google glass, big data etc.Recently, he has been digging deep into the field of data science and machine learning.

Follow him on Twitter and Google+.
Ajitesh Kumar

Leave A Reply