Child component

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
• event.component.html

    <h3>9:00 - Title</h3>
      

5. Create a new event.component.ts file
6. Paste in the initial Event code
• event.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-event',
  templateUrl: './event.component.html',
})
export class EventComponent {

}      

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 theapp.module.ts file
2. Import EventComponent
• app.component.ts

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'

@NgModule({
  declarations: [
    AppComponent,
    EventComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ NO_ERRORS_SCHEMA ]
})
export class AppModule { }
      

3. Render the EventComponent component in the app.component.html file:
• app.component.html

<div class="container">
  <div class="row">
    <div class="col-md-9">
      <app-event></app-event>
    </div>
    <div class="col-md-3">
      Right column
    </div>
  </div>
</div>

      



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

4. So add a second instance of the EventComponent in the left column
5. Remove the text from the right column
• app.component.html

<div class="container">
  <div class="row">
    <div class="col-md-9">
      <app-event></app-event>
      <app-event></app-event>
    </div>
    <div class="col-md-3">
    </div>
  </div>
</div>

    

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.