Angular component input properties

Text version of the video

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.

Slides

Angular 2 Tutorial playlist

Angular 2 Text articles and slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

In this video we will discuss how to pass data from the container component to the nested component using input properties.

At the moment the count of employees displayed against each radio button are hard-coded with in the EmployeeCountComponent.

export class EmployeeCountComponent {
all: number = 10;
male: number = 5;
female: number = 5;
}

Convert a component property to an input property using @Input decorator : To be able to pass the values for these 3 properties from the container component to the nested component we need to decorate the properties with @Input() decorator. Decorating a property with @Input() decorator makes the property an input property. Notice I have also removed the default hard-coded values, as we will be passign the values from the parent component i.e EmployeeListComponent. To be able to use the @Input() decorator we will have to first import it from @angular/core.

@Component({
selector: 'employee-count',
})
export class EmployeeCountComponent {
@Input()
all: number;

@Input()
male: number;

@Input()
female: number;
}

Passing data from the parent component to the child component : There are 2 modifications that we need to do in EmployeeListComponent to be able to pass values from the parent component i.e EmployeeListComponent to the child component i.e EmployeeCountComponent. The first change is in EmployeeListComponent TypeScript file as shown below. Notice I have introduced 3 methods that return male employees count, female employees count and total employees count.

getTotalEmployeesCount(): number {
}

getTotalMaleEmployeesCount(): number {
}

getTotalFemaleEmployeesCount(): number {
}

Please note : In the filter method we are using tripple equals (===) instead of double equals (==). The table below explains single, double and tripple equals in TypeScript.

Operator Use to
= Assign a value
== Compare two values
=== Compare two values and their types

[employee-count [all]="getTotalEmployeesCount()"
[male]="getMaleEmployeesCount()"
[female]="getFemaleEmployeesCount()"]
[/employee-count]

At this point, save all the changes and run the application and we see the correct count of employee next to each radio button.

Now, let's add the following new employee object to the to the employees array in EmployeeListComponent.
{ code: 'emp106', name: 'Steve', gender: 'Male', annualSalary: 7700.481, dateOfBirth: '11/18/1979' }

Save changes and reload the web page and notice that All count and Male count is increased by 1 as expected.

At the moment when we click the radio buttons nothing happens. In our next video we will discuss how to pass data from the child component to the parent component i.e when a radio button checked event is raised in the child component, we want to know about it in the parent component so we can react and decide which employees to show in the table depending on the selection of the radio button.

[raqibul]

The world is still beautiful because of some people like u

[ruthyayele]

you are born to simplify and lovely coding. Mountain of thanks for you and your team

[sanmani]

Sir really who ever came and watched your videos And will comes are blessed people. I didnt know how to proceed with angular but u made my learning very easy. Ur teaching is very good. Even i feel to teach very clearly to others. Thank you sir u r motivating to teach others with clear view.

[MrAnupkash]

A tricky concept explained very well. Thank you Sir!!

[srinivasaraopalakaluri]

Your Explanation, Our Future . Thanks a lot :)

[kamdemkakengne]

Thank you very much Venkat! You're a good teacher!

[rajarajanseeman]

can't think of learning without you. Live long Venkat K

[lalitsharma]

sir you are born to simplify and lovely coding. Mountain of thanks for you and your team

[MuhammadIslam-qitf]

Nice tutorial, you solved my confusion. thanks

[bemisalsharma]

Your all video are very helpful...and its easy to us understand all things... let me know when will you upload the video crud operation using angular2 and asp.net mvc.

[psreenu]

it is very good tutorial i am waiting for coming videos

[praptipopat]

very nice explanation. I tried this by not removing refresh button and getemployees() method. So initially it showed me count of 4 for all employees. Now when I click on refresh, it adds one more record and at the same time count gets updated automatically. That's nice but I can't understand that how it is handling this latest count? It would be really great if you can answer this. Thanks

[AyushKumar-mocd]

Hi Venkat, great tutorial, i am new to angular so may be this question is silly but would not it be easier if we can directly import the employee list ts file into employeeCount ts file or do we need to have a view in between to access the properties of other TS files?

[mr_panda_india]

Great job sir !! Can you please make a video of Angular2 Routing and HTTP

[tazmazia]

Quick Q:
Can we also pass data to input properties with simple variables rather than using functions?

[chetanpl]

Very nice sir can you please make a video for parent function to child function calling and another example for child to parent.

[saurabhchauhan]

Can you please make a video for Rx Js with angular ? There are some methods like flatmap, switch map and something deferred object but can't understand. If you would do it that would be much helpful.

[pallavikarpaklu]

I have two sibling component 1) searchbar 2) employeelist based on what i type in searchbar component I was my results to filter in eemployeelist component. Can you suggest which is an appropriate way to do this?

[dusanradosavljevic]

Why values of all, male and female, works how expected in Edge but in firefox instead of value , they are undefined?

[pallavikarpaklu]

Can you also do an video on event emitter and subscriber concepts