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';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

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

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

app.component.html

<!--The content below is only a placeholder and can be replaced.-->

<h2>Welcome to, {{title}}</h2>

<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 choosen Web Track</div>
  <div *ngSwitchCase="'mobile'">You have choosen Mobility Track</div>
  <div *ngSwitchCase="'blockchain'">You have choosen Blockchain Track</div>
  <div *ngSwitchDefault>Choose a Training Track</div>
</div>

<router-outlet></router-outlet>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title :string = 'GEP Training Center';
  eventName: string = "Angular 6";

  participant_count: number = 60;
  imageSource: string ="assets/Angular.png";
  eventStatus: boolean = false;
  track: string = "";

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

  register(){
    console.log("Registration completed!");
    this.participant_count++;
    this.track="mobile";
  }

  closeRegistration(){
    this.eventStatus = true;
  }

}

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ZoomDirective } from './zoom.directive';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    ZoomDirective,
    HomeComponent,
    AboutComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

zoom.directive.ts

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

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

  constructor() { }

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

}