Child Component

1. Event component

Our app will consist of two components. The main one - the App component, which will be responsible for layout and 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 initial Event code
• event.component.ts
import {Component} from '@angular/core';
                
                @Component({
                  selector: 'app-event',
                  templateUrl: './event.component.html',
                })
                export class EventComponent {
                
                }

Most of the 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 didn't have 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.

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. Add the 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.