Child component


Author: Dawid Adach


Streaming now live

HTML, CSS - free educational webinar for your quarantaine.


Free live lesson

Learn HTML, CSS & JavaScript fundamentals. Join now, and don't miss the livestream.


1. Event component

Our app will consist of two components. The main one - the App component, will be responsible for layout. The other is the Event component - a sub-component which will render a single event entity.

  1. Create a new components folder under src/app
  2. Create a new event folder under src/src/app/components/
  3. Create a new event.component.html file
  4. Paste the initial Event code
        <h3>9:00 - Title</h3>
  6. Create a new event.component.ts file
  7. Paste in the initial Event code
    import {Component} from '@angular/core';
      selector: 'app-event',
      templateUrl: './event.component.html',
    export class EventComponent {
New files structure

Most people will simply call Event a component. This is perfectly fine, however, there is the one important thing that I want you to remember if you haven't had any experience with Object Oriented Programming in the past.

Our class is just a definition of the component. It describes how our component will look and behave but it doesn't create an instance of the component yet.

You can think of it like a stamp. A stamp itself is just a definition of a picture/image. In order to create a stamp imprint, you have to take some action. Furthermore - our single stamp (class) can create multiple copies (instances).

2. Import and render EventComponent

  1. Open the app.module.ts file
  2. Import EventComponent
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { AppComponent } from './app.component';
    import { MDBBootstrapModule } from 'angular-bootstrap-md';
    import { EventComponent } from './components/event/event.component'
      declarations: [
      imports: [
      providers: [],
      bootstrap: [AppComponent],
      schemas: [ NO_ERRORS_SCHEMA ]
    export class AppModule { }
  4. Render the EventComponent component in the app.component.html file:
    <div class="container">
      <div class="row">
        <div class="col-md-9">
        <div class="col-md-3">
          Right column
    App preview

    As we mentioned before, since our EventComponent component is a definition, we can render multiple instances of the same component.

  6. So add a second instance of the EventComponent in the left column
  7. Remove the text from the right column
    <div class="container">
      <div class="row">
        <div class="col-md-9">
        <div class="col-md-3">

    Now when we know how to create an instance of our Event component let's learn how to make it more dynamic and pass some data into it.

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding & in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...