Child component example in Angular 6

Angular applications are built with a set of components often nested set of components. We can embed a component inside another component using the nested components selector tag. Let us create a very basic child component and embed it in the home component.

Let us start with creating a child component using the following command

ng g c child

The command will create a component class file child.component.ts and a template file child.component.html. In this example we will not make any changes to the class file, we will add a simple message to the template file.

child.component.ts
import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-child',

  templateUrl: './child.component.html',

  styleUrls: ['./child.component.css']

})

export class ChildComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}


child.component.html

<p>

  Hello from child Component.

</p>

Now we have to child component, we include the child component in the existing component. Also we need to import the new child component and include it in the declarations section of the app.module

We can include the child component in the parent component’s template as follows.

<table class="layoutTable">

  <tr>

    <td class="leftMenu">

        <a routerLink="/about" routerLinkActive="active">About</a><br/>

        <a routerLink="/contact" routerLinkActive="active">Contact</a><br/>

    </td>

    <td class="content">

      This is the Home page of the Routing Component

      <app-child></app-child>

      <router-outlet></router-outlet>

    </td>

  </tr>

</table>

The output is as follows, notice that the text we added to the child component is now displayed inside the parent component.