Angular 2 container and nested components

Описание: Text version of the video
http://csharp-video-tutorials.blogspo...

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
   / @aarvikitchen5572  

Slides
http://csharp-video-tutorials.blogspo...

Angular 2 Tutorial playlist
   • Angular 2 tutorial for beginners  

Angular 2 Text articles and slides
http://csharp-video-tutorials.blogspo...

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...

All Dot Net and SQL Server Tutorials in Arabic
   / kudvenkatarabic  

In this video and in the next few videos we will discuss
1. What is a nested component
2. What is a container component
3. Passing data from the nested component to container component
4. Passing data from the container component to nested component
5. Along the way we will discuss component input and output properties
6. Creating custom events using EventEmitter class
7. What is ng-container directive and it's use

What is a container and nested component : In this example we have 2 components
1. One of the component displays the list of employees. We have already built this component in our previous videos in this series. We named this component EmployeeListComponent.

2. The other component displays the radio buttons and the count of employees. We have not created this component yet. We will create it in this video. We will call this component EmployeeCountComponent.

3. We will nest EmployeeCountComponent in EmployeeListComponent. So EmployeeCountComponent becomes the nested component or child component and EmployeeListComponent becomes the container component or parent component.

We have already implemented the required code for EmployeeListComponent in our previous videos

Now let's create the EmployeeCountComponent. Add a new TypeScript file to the employee folder. Name it employeeCount.component.ts. Copy and paste the following code.

employeeCount.component.ts
----------------------------
We have set select='employee-count'. We can use this selector as a directive where we want to use this component. We are going to nest this component inside EmployeeListComponent using employee-count selector as a directive.

We have 3 properties (all, male and Female). At the moment we have hard coded the values. In our next video we will discuss how to pass the values for these properties from the container component i.e from the EmployeeListComponent.

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

@Component({
selector: 'employee-count',
templateUrl: 'app/employee/employeeCount.component.html',
styleUrls: ['app/employee/employeeCount.component.css']
})
export class EmployeeCountComponent {
all: number = 10;
male: number = 5;
female: number = 5;
}

Add a new StyleSheet to the employee folder. Name it employeeCount.component.css. Copy and paste the following style class.

employeeCount.component.css

.radioClass {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}

Now let's add the view template for EmployeeCountComponent. Add a new HTML page to the employee folder. Name it employeeCount.component.html. Copy and paste the following html.

employeeCount.component.html

Notice we have 3 radio buttons and bound them to the 3 properties (all, male, female) we have in the component class. We are using interpolation for data-binding.

[span class="radioClass"]Show : [/span]

[input name='options' type='radio' value='All']
[span class="radioClass"]{{'All(' + all + ')'}}[/span]

[input name='options' type='radio' value='Male']
[span class="radioClass"]{{'Male(' + male + ')'}}[/span]

[input name='options' type='radio' value='Female']
[span class="radioClass"]{{'Female(' + female + ')'}}[/span]

Nest EmployeeCountComponent in EmployeeListComponent component. To do this, use EmployeeCountComponent selector (employee-count) as a directive [employee-count][/employee-count] on EmployeeListComponent component as shown below.

[employee-count][/employee-count]

Finally, declare EmployeeCountComponent in module.ts file. Please make sure you import the component first and then add it to the declarations array of @NgModule decorator.

At this point, run the project and you should see employee count radio buttons and the employee list.

At the moment the employee counts are hard coded with in the EmployeeCountComponent. In our next video we will discuss how to pass the count values from the container component i.e from the EmployeeListComponent to the nested component i.e EmployeeCountComponent.