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.
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
}
Latest posts by Ajitesh Kumar (see all)
- Sparse Mixture of Experts (MoE) Models: Examples - October 6, 2024
- Anxiety Disorder Detection & Machine Learning Techniques - October 4, 2024
- Confounder Features & Machine Learning Models: Examples - October 2, 2024
I found it very helpful. However the differences are not too understandable for me