Pass data from parent to child component in angular

Text version of the video

Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.

Slides

Angular CRUD Tutorial

Angular CRUD Tutorial Text Articles & 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 Parent component to Child component using input properties. Let us understand this with an example.

At the moment, ListEmployeesComponent is doing 3 things
1. Calls the Angular EmployeeService to retrieve employees data

2. Loops through each employee

3. Has all the display logic to display employee details

Now let's create another component and off load the responsibility of displaying employee details to that component. Let's name this new component - DisplayEmployeeComponent.

Here is the Angular CLI command you can use to generate the component
ng g c employees\DisplayEmployee --no-spec --flat

For the code used in the video, please refere to the text article using the link below

To create an input property decorate the property with @Input decorator

Input properties are typically used to pass data from the parent to child component

Next video : Intercepting and reacting to INPUT Property Changes

[teriyakov]

Wow! I used to watch your videos years ago. It's awesome to see you're still churning out great material. Long time fan here. Keep up the good work. It's very much appreciated!

[prakashgunjari]

Hey Venkat As soon as my first salary I am going to donate a good amount for your tutorials, its a selfless service, you could have made millions on udemy

[mysimpletips]

Hi Venkat, Thanks for your consistency in providing helping videos; I appreciate your efforts and way you teach. It really helps.

[fidelisderera]

thank you for these videos, your efforts are well appreciated... from south africa

[nagratnadsd.soudagar]

Can I know the difference between angular 2 tutorial videos and angular curd tutorial ? Which series of videos I have to watch first?

[balsharma]

Cannot read property 'department' of undefined.' does not show any values in display component. DebugContext_

[asfandalikhan]

I want to pay him. That much high-quality content can't be free.

[sharathcv]

How would the reference be? Would the employee object that gets passed to the child component still have the reference to the object in the list in parent component?

[Kristofercodes]

Hi Pragim i like your tutorials very much! Could you maybe do a video on how to create a "modal" in angular/bootstrap and work with them? that could be very relative to what you are teaching right now. Keep up the good work!

[rajureddy]

hello venkat,
if i pass service as input one element is good but some time lost of inputs to require is any other methods.

[krantireddy]

Cannot read property employee details in list-employees page.receiving null

[geejey]

Pass data from parent to child component in angular getting an error ERROR in - error TS2307: Cannot find module '../models/employee.model'.

[EriAirlangga]

Venkat Sir, do I have to be online everytime I make a new Angular project?

[thakurjaswantsingh]

sir make some courses on Mean stack development and build a small project based on MEAN stack technologies
thanks 4 good videos

[imranali-knmv]

sir how we can decide which component is parent and which is child component???

[interstellar]

@Input not working...in my code....and ..child component temple rendering ...

[dhirenpathak]

Dear Venketjee, Thanks for Good Tutorials.. can you sent me source code for this Project ???

[saikumarduggana]

How to pass data from siblings to parent component?

[rodneyjoseperello]

Hi Pragim. Where is the rest of the videos?