Building nested components in Angular

Background

So far in learning Angular, we have seen following posts -

1. Angular Hello World example
2. Understanding angular application folder structure
3. Routing and navigation in Angular

This post is the continuation of the same series. If you are directly landing on this post please do take a look at above posts to understand the basics. This post assumes you have an Angular project set up with a component and it's navigation.

In this post, we will try to add a new component that will be used in our existing component.

Building nested components in Angular

In the last post, we created a new component new-employee and set up navigation for it. Following is the final output from it.

In this post, we will create a new component and add it inside our new-employee component. So let's create a new component. To do that execute the following command -

• ng g c employee/subemp

This is shorthand for -

• ng generate component employee/subemp

Your output should look like -

athakur@athakur-Inspiron-7560:~/Documents/per_code/angulardemo$ ng g c employee/subemp
CREATE src/app/employee/subemp/subemp.component.css (0 bytes)
CREATE src/app/employee/subemp/subemp.component.html (25 bytes)
CREATE src/app/employee/subemp/subemp.component.spec.ts (628 bytes)
CREATE src/app/employee/subemp/subemp.component.ts (269 bytes)
UPDATE src/app/app.module.ts (597 bytes)

Notice the new files created and the root module updated with import and declaration of the new component. This is exactly the same steps we did for our earlier component. If you recall in the last post we generated the new-employee component similar way -

• ng generate component employee/new-employee 

The directory structure should look like below now -

Now let's start adding code. First, go to subemp.component.ts and add/edit code so that it looks like below -

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-subemp',
  templateUrl: './subemp.component.html',
  styleUrls: ['./subemp.component.css']
})
export class SubempComponent implements OnInit {
  constructor() { }
  ngOnInit() {
    console.log("SubempComponent initialized");
  }
}

This is a very basic boilerplate code.  Notice that this components HTML is in file './subemp.component.html' and similarly, CSS is in './subemp.component.css'. Also, note that this components selector is called 'app-subemp'. So that's the tag we will use in the parent's HTML template file.

Let's make changes to the child's HTML template now. Go to './subemp.component.html'  and add following code.

<h1>This is sub components heading</h1>
<p>
  Yay! subemp works!
</p>

There are no changes needed in the CSS file. But if you are defining custom CSS then you can add it in 

'./subemp.component.html'. Now finally let's add the child component in the parent component. So go to parent components HTML file - new-employee.component.html and make sure it looks like below -

<h1>Welcome to the Employee portal</h1>
<h3>Name : {{name}}</h3>
<h3>Age : {{age}}</h3>
<app-subemp></app-subemp>

The only new thing that we have added here is an <app-subemp></app-subemp> tag that we say was the selector of the child component. Now finally run -

• ng serve -o

to build and run your angular app and you should see below output in the browser.

You can see how the sub-component renders inside the parent component.

Also, note that we added this route in the last post. So we are just navigating to this route and seeing the changes.

If you are wondering how it figures out the app-subemp tag then you can look at the app.module.ts file which is the angular root module file. Here we have imported this new component and added in the declaration section. This automatically happens when you use angular cli to generate a new component like we did above with command -

• ng generate component <component_name>

In the subsequent posts, we will see some more angular topics so stay tuned.

Related Links

• Angular Hello World example
• Understanding angular application folder structure
• Routing and navigation in Angular