Angular 2 – Parent-Child Components Explained with Code Examples

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
}