app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path:'about',
    component: AboutComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.css

.open {
  color: green
}

.closed {
  color: red
}

app.component.html

<!-- https://bit.ly/2GWt2NY -->
<h4> Welcome to, {{title}}</h4>
<ul>
  <li>
    <a routerLink="">Home</a>
  </li>
  <li>
    <a routerLink="about">About</a>
  </li>
</ul>

<h3>{{ eventName }}</h3>

<p>Total Participants: {{participant_count}}</p>

<div *ngIf="!eventStatus">
<img src={{imageSource}} [zoomImage]="'web'">
</div>

<button (click)="register()" [disabled]="eventStatus">Register</button>
<button (click)="closeRegistration()">Close Registration</button>

<div *ngFor="let event of events">
  <h4 [ngClass]="{
    'open':event.participant_count <= 50,
    'closed': event.participant_count >50
  }">{{event.title}}</h4>
  <h5>Participant Count: {{event.participant_count}}</h5>
</div>

<div [ngSwitch]="track">
  <div *ngSwitchCase="'web'">You have enrolled in Web Track</div>
  <div *ngSwitchCase="'mobile'">You have enrolled in Mobile Track<</div>
  <div *ngSwitchCase="'blockchain'">You have enrolled in Blockchain Track<</div>
  <div *ngSwitchDefault>Please choose a learning track</div>
</div>

<router-outlet></router-outlet>

app.components.ts

import { Component } from '@angular/core';
import { registerContentQuery } from '@angular/core/src/render3';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title : string= 'GEP Learning Center';
  eventName : string = 'Angular 6';
  participant_count :number = 30;
  imageSource: string = "assets/Angular.png"
  eventStatus: boolean = false;
  track: string = "";

  events =[
    {
      title: 'React',
      participant_count: 20
    },{
      title: 'Blockchain',
      participant_count: 50
    },{
      title: 'Android',
      participant_count: 100
    }
  ]


  register(){
    console.log("Registration Succesfull!");
    this.participant_count++
    this.track="web";
  }
closeRegistration(){
  this.eventStatus = true;
}


}

styles.css

/* You can add global styles to this file, and also import other style files */
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

body {
    margin: 0;
    background: #f2f2f2;
    font-family: 'Quicksand', sans-serif;
    height: 100vh;
  }
  #container {
    display: grid;
    grid-template-columns: 70px auto;
    height: 100%;
  }
  #container #content {
    padding: 30px 50px;
  }
  #container #content ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  #container #content ul li {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 8px;
  }
  #container #content ul li a {
    font-size: 1.5em;
    text-decoration: none;
    font-weight: bold;
    color: #00a8ff;
  }
  #container #content ul li ul {
    margin-top: 20px;
  }
  #container #content ul li ul li {
    padding: 0;
  }
  #container #content ul li ul li a {
    font-size: 1em;
    font-weight: 300;
  }

zoom.directive.ts

import { Directive, HostBinding, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[zoomImage]'
})
export class ZoomDirective {
  @HostBinding('width') width :number= 300;
  @Input('zoomImage') track : string;

  constructor() { }

  @HostListener('mouseenter',['$event'])
  onMouseEnter(e){
      this.width = 500;
      console.log(this.track);
  }

}