event-thumbnail.component.ts

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 [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');
    }
}

event-list.component.ts file

import { EventService } from './shared/event.service';
import { Component, OnInit } from '@angular/core';
import { ToastrService } from '../common/toastr.service';

@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 (click)="handleThumbnailClick(event.name)"  [event]="event"></event-thumbnail> -->
                <event-thumbnail (eventClick)="handleEventClick($event)"  [event]="event"></event-thumbnail>
            </div>
        </div>
    </div>
    `
})


export class EventListComponent implements OnInit{

    events: any[];

    constructor(private eventService: EventService, private toastr: ToastrService){
        
    }

    ngOnInit(){
        this.events = this.eventService.getEvents();
    }
    handleThumbnailClick(eventName){
        this.toastr.success(eventName);
    }
    handleEventClick(data){
        console.log('Received data from child component: ', data);
    }

}

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';
import { EventService } from './events/shared/event.service';
import { ToastrService } from './common/toastr.service';

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