event-list.component.ts file

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

@Component({
    selector: "events-list",
    template: `
    <div>
    <h2>Upcoming Angular Evnets</h2>
        <hr>
        <div class="row">
            <div class="col-md-5" *ngFor="let event of events">
                <event-thumbnail  [event]="event"></event-thumbnail>
            </div>
        </div>
    </div>
    `
})


export class EventListComponent{

    events = [
        {
          id: 1,
          name: 'Angular Connect',
          date: '9/26/2036',
          time: '10:00 am',
          price: 599.99,
          imageUrl: '/assets/images/angularconnect-shield.png',
          onlineUrl: 'http://google.com'
        },
        {
          id: 2,
          name: 'ng-nl',
          date: '4/15/2037',
          time: '9:00 am',
          price: 950.00,
          imageUrl: '/assets/images/ng-nl.png',
          onlineUrl: 'http://google.com',
          location: {
            address: 'The NG-NL Convention Center & Scuba Shop',
            city: 'Amsterdam',
            country: 'Netherlands'
          },
        {
          id: 3,
          name: 'ng-conf 2037',
          date: '5/4/2037',
          time: '10:00 am',
          price: 759.00,
          imageUrl: '/assets/images/ng-conf.png',
          location: {
            address: 'The Palatial America Hotel',
            city: 'Salt Lake City',
            country: 'USA'
          },
        {
          id: 4,
          name: 'UN Angular Summit',
          date: '6/10/2037',
          time: '8:00 am',
          price: 800.00,
          imageUrl: '/assets/images/basic-shield.png',
          location: {
            address: 'The UN Angular Center',
            city: 'New York',
            country: 'USA'
          },
        {
          id: 5,
          name: 'ng-vegas',
          date: '2/10/2037',
          time: '9:00 am',
          price: 400.00,
          imageUrl: '/assets/images/ng-vegas.png',
          location: {
            address: 'The Excalibur',
            city: 'Las Vegas',
            country: 'USA'
          }
      ]
}

event-thumbnail.component.ts file

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'event-thumbnail',
    template: `        
        <div class="well thumbnail">
            <h2>{{event?.name}}</h2>
            <div>Date: {{event?.date}}</div>
            <div [style.color]="event?.time === '8:00 am' ? 'green' : '#bbb'" [ngSwitch]="event?.time">
                Time: {{event?.time}}
                <span *ngSwitchCase="'8:00 am'">(Early Start)</span>
                <span *ngSwitchCase="'10:00 am'">(Late Start)</span>
                <span *ngSwitchDefault>(Normal Start)</span>
            </div>
<!-- <div [ngStyle]="{'color': event?.time === '8:00 am' ? 'green' : '#bbb', 'font-weight': event?.time === '8:00 am' ? 'bold' : 'normal'}" 
            [ngSwitch]="event?.time">
                Time: {{event?.time}}
                <span *ngSwitchCase="'8:00 am'">(Early Start)</span>
                <span *ngSwitchCase="'10:00 am'">(Late Start)</span>
                <span *ngSwitchDefault>(Normal Start)</span>
            </div> -->
 <!-- <div [ngStyle]="getStartTimeStyle()" 
            [ngSwitch]="event?.time">
                Time: {{event?.time}}
                <span *ngSwitchCase="'8:00 am'">(Early Start)</span>
                <span *ngSwitchCase="'10:00 am'">(Late Start)</span>
                <span *ngSwitchDefault>(Normal Start)</span>
            </div> -->
<!-- <div [ngClass]="{green: event?.time==='8:00 am', bold: event?.time==='8:00 am'}" [ngSwitch]="event?.time">
                Time: {{event?.time}}
                <span *ngSwitchCase="'8:00 am'">(Early Start)</span>
                <span *ngSwitchCase="'10:00 am'">(Late Start)</span>
                <span *ngSwitchDefault>(Normal Start)</span>
            </div> -->
 <!-- <div [ngClass]="getStartTimeClass()" [ngSwitch]="event?.time">
                Time: {{event?.time}}
                <span *ngSwitchCase="'8:00 am'">(Early Start)</span>
                <span *ngSwitchCase="'10:00 am'">(Late Start)</span>
                <span *ngSwitchDefault>(Normal Start)</span>
            </div> -->
            <div>price: ${{event?.price}}</div>
            <!-- <div>time: {{event?.time}}</div> -->
            <div *ngIf="event?.location">
                <span>Location: {{event?.location?.address}}</span>
                <span> </span>
                <span>{{event?.location?.city}}, {{event?.location?.country}}</span>
            </div>
            <div *ngIf="event?.onlineUrl">
                Online Url: {{event?.onlineUrl}}
            </div>
            
        </div>

    `,
    styles : [`
        .green{color: green !important}
        .bold{font-weight: bold;}
        .thumbnail{min-height: 210px;}
    `]
})

export class EventThumbnailComponent{
    @Input() event: any;
      getStartTimeStyle():any{
        if(this.event && this.event.time === '8:00 am')
            return {color: '#003300', 'font-weight': 'bold'}
        return {}
    }

}

app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { EventsAppComponent } from './events-app.component';
import { EventListComponent } from './events/event-list.component';
import { EventThumbnailComponent } from './events/event-thumbnail.component';
import { NavBarComponent } from './nav/navbar-component';

@NgModule({
  declarations: [
    EventsAppComponent,
    EventListComponent,
    EventThumbnailComponent,
    NavBarComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [EventsAppComponent]
})
export class AppModule { }