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, C/C++, mobile programming languages etc, and, computing fundamentals related with cloud-native technologies, application security, cloud computing platforms, mobile apps, big data etc.

He has also authored the book, Building Web Apps with Spring 5 and Angular.
Ajitesh Kumar

Leave A Reply

Time limit is exhausted. Please reload the CAPTCHA.