Linda Ojo

Angular — How to display one component within another

Published: 2020-04-15

Nested Components

Before we get started, all of the code for this tutorial can be found in my GitHub Repository.

Let's begin with an Angular project which has a container component. We are going to display another component (let's call it child component) within the container component in this post.

We will be using the Angular CLI to generate modules and components, you can install Angular CLI by running the command below.

In terminal
npm i @angular/cli

Create a Child Component

The first thing is to create the “child” component you plan to display. If you haven’t created the child component already, you can do so using the command below. We will display this child component within the container component.

In terminal
ng generate component <child-component-name>

Create the Child module

Navigate into your child component folder and create a module for your component using the command below. The module acts as a package which contains the component and carries everything that concerns the component.

In terminal
ng generate module <child-component-name> --flat

--flat is a command-line flag that ensures that the module is not created within a new folder.

Open child.module.ts file and import the child component using JavaScript import at the top of the file.

Note: Always import your component or modules using JavaScript before using them in the NgModule decorator.

Next, declare and export your child component within the NgModule in child.module.ts so it's made available to other components including the container component. child.module.ts should look a lot like this 👇🏾

In child.module.ts
import { ChildComponent } from './child.component'; // JavaScript import
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [ChildComponent], // Declare child component
  imports: [CommonModule],
  exports: [ChildComponent] // Export child component
})

export class ChildModule { }

Import Child Module into Container Module

Next, head on to cointainer.module.ts and import the child Module within the NgModule.

💡 you can create a container module same way we made the child module if it doesn’t exist. This is what my cointainer.module.ts looks like.

In container.module.ts
import { ChildModule } from './../child/child.module'; // JavaScript Import
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    ChildModule // NgModule import of Child Module
  ]
})
export class ContainerModule { }

Display Child Component in Container Component using Selector

This is the easiest part. Open container.component.html and display the child component using its selector as shown below. You can find the selector within the @Component Decorator in child.component.ts

container.component.html
<h1> I am a Container </h1> 
<app-child></app-child> <!-- child component selector -->

That’s all.

Thank you Feranmi Akinlade for reviewing drafts.

Subscribe to Newsletter

Be the first to know about quality articles and poems written by Linda Ojo.