Author: Dawid Adach
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.
- Create a new
components
folder undersrc/app
- Create a new
event
folder undersrc/src/app/components/
- Create a new
event.component.html
file - Paste the initial Event code
- Create a new
event.component.ts
file - Paste in the initial Event code
<h3>9:00 - Title</h3>
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
- Open the
app.module.ts
file - Import EventComponent
- Render the EventComponent component in the app.component.html file:
- So add a second instance of the EventComponent in the left column
- Remove the text from the right column
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 { }
<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.
<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.
Previous lesson Next lesson
Spread the word:
