Angular 2 nested components

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 nesting angular components i.e including a component inside another component.

Angular 2 is all about components. A component in Angular allows us to create a reusable UI widget. A component can be used by any other component. Let's look at a simple example of nesting a component inside another component.

Create a page that displays Employee details. This page should be composed of 2 angular components
AppComponent - This component is the root component and displays just the page header.
EmployeeComponent - This component is the child component and displays the Employee details table. This child component will be nested inside the root AppComponent.

Step 1 : Right click on the "App" folder and add a new folder. Name it "employee". We will create our EmployeeComponent in this folder.

[table]
[tr]
[td]First Name[/td]
[td]{{firstName}}[/td]
[/tr]
[tr]
[td]Last Name[/td]
[td]{{lastName}}[/td]
[/tr]
[tr]
[td]Gender[/td]
[td]{{gender}}[/td]
[/tr]
[tr]
[td]Age[/td]
[td]{{age}}[/td]
[/tr]
[/table]

@Component({
selector: 'my-employee',
})
export class EmployeeComponent {
firstName: string = 'Tom';
lastName: string = 'Hopkins';
gender: string = 'Male';
age: number = 20;
}

@Component({
selector: 'my-app',
template: `[div]
[h1]{{pageHeader}}[/h1]
[/div]`
})
export class AppComponent {
pageHeader: string = 'Employee Details';
}

At this point if we run the application, we only see the page header - "Employee Details", but not the table which has the employee details. To be able to display employee details table along with the page header, we will have to nest EmployeeComponent inside AppComponent. There are 2 simple steps to achieve this.

Please refer to the text article using the link below for the code used in the demo

[Iamdolphin]

Great video, and awesome teacher. Highly recommend

[nageshsrinivas]

thank you very much for the tutorials sir..it has helped me a lot.

[cfv]

Explanation is clear and easy to understand. Thanks

[shariqansari]

@kudvenkat, I am a big fan of your tutorials. From last 7 years learning from your videos. Waiting React.js videos from yourside.

[CaimanNet]

Thanks a lot Sir.
We were waiting for this Angular 2 series.
Please try to cover how to make an Application using AngularJS2, Typescript, NGRX & WebAPI.

[andrewharvley-felder]

Great video thank you. If you have a nested component or components, how, when you refresh the page, do you bring the user back to the same state they were in pre refresh?

[mhsindia]

hi sir, is there any way to import js file into typescript

[banditalks]

hi venkat iam getting maximum call stack size exceeded error can u please tell how can we resolve this

[venkatramana]

no one comes close to you in explaining difficult topics sir.

[abhishekvhanmore]

sir if we have html file which we link as templateurl in under app folder then the selector for that html page where we should use that selector for displaying or bootstraping our app??
help me sir it showing can't find module

[shraddhapaliwal]

Hello Sir, Please upload videos on MEAN.js . nobody except you can make my concepts clear. I love each and every tutorial of u.Thanks.

[iBoolGuy]

Hello Mr Venkat, I followed this playlist from beginning, and installed all necessary files. I'm on VS2019.
But, at 2:30, when I right click on a folder, and click Add, I don't have the option to add TypeScript File.
Although I checked the installed version in my VS program, and it says (TypeScript Tools for Microsoft Visual Studio 16.0.10821.2002)
(I installed the latest version from MS website, and through NuGet manager...
help

[krishnag]

Hi venkat can you please provide unit cases related tutorials in angular 2 I searched for your video I didnt find

[ajaysriram]

Hi Venkat,
I need a calendar it display only years. Along with calendar icon. Now I am using in drop-down. So I need like that. Can you guide me...
Thanks,
Ajay

[oscaronorato]

Hi Kudvenkat,

I can see employee data, but I can see the table except in Firefox. because it can be? This refers to the .css and I do not understand the reason.

Tank you.

[aneeshchandran]

pls provide a SSIS, SSAS, SSRS Tutorial

[aariefe]

Excellent videos to learn angular 2. I have watched part 1-6. When r further parts coming?

[ethanz]

I do not know why the style not appear in my browser, no matter how i changed the color or manually refresh the browser, no any effects at all. All other contents are same as yours, just the style has problem. The only link should be in index.html to link my styles.css right? So do u know what's the problem may cause this issue? Thanks.

[hrvojekrolo]

Hi! Great videos! Can you make video about form registration and login with ASP MVC and Angular 2?

[sanjaychouhan]

Hello sir thanks for your effort.i have a question is it possible to add multiple component inside bootstrap array in app.module.ts. if Yes then what is use case thanks