Step 1: event-details.component.ts file

import { EventService } from './../shared/event.service';
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
    templateUrl: './event-details.component.html',
    styles: [`
        .container {padding-left: 20px; padding-right: 20px;}
        .event-image{height: 100px}
    `]
})

export class EventDetailsComponent{

    event:any;

    constructor(private eventService: EventService, private route:ActivatedRoute){}

    ngOnInit(){
        this.event = this.eventService.getEvent(
            +this.route.snapshot.params['id']
        );
    }
}

Step 2: event-thumbnail.component.ts file

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

@Component({
    selector: 'event-thumbnail',
    template: `        
        <div [routerLink]="['/events', event.id]"
            class="well thumbnail">
            <h2>{{event?.name}}</h2>
            <div>Date: {{event?.date}}</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>price: ${{event?.price}}</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>
            <!-- <button class="btn btn-primary" (click)="handleClickMe()"> Click Me</button> -->
        </div>

    `,
    styles : [`
        .green{color: green !important}
        .bold{font-weight: bold;}
        .thumbnail{min-height: 210px;}
    `]
})
export class EventThumbnailComponent{
    @Input() event: any;
    @Output() eventClick = new EventEmitter;
    getStartTimeClass(){
        if(this.event && this.event.time === '8:00 am')
            return ['green', 'bold']
        return []
        // if(this.event && this.event.time === '8:00 am')
        //     return 'green bold'
        // return ''
        //const isEarlyStart = this.event && this.event.time === '8:00 am'
        //return {green: isEarlyStart, bold: isEarlyStart}
    }
    getStartTimeStyle():any{
        if(this.event && this.event.time === '8:00 am')
            return {color: '#003300', 'font-weight': 'bold'}
        return {}
    }
    handleClickMe(){
        // this.eventClick.emit('Foo');
        this.eventClick.emit(this.event.name);
        //console.log('Clicked');
    }
}

Step 3: nav-bar.component.html file

<div class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" >ngEvents</a>
      </div>
  
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li>
            <a [routerLink]="['/events']">All Events</a>
          </li>
          <li><a href="">Create Event</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" >
              Events
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li >
                <a href="">Angular Connect</a>
              </li>
            </ul>
          </li>
        </ul>
        <div class="navbar-header navbar-right">
          <ul class="nav navbar-nav">
            <li>
              <a>Welcome John</a>
            </li>
          </ul>
        </div>
        <form id="searchForm"  class="navbar-form navbar-right"  >
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search Sessions" >
          </div>
          <button class="btn btn-default" >
            Search
          </button>
        </form>
      </div>
    </div>
  </div>