Step 1: create a component like create-event.component.ts

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

@Component({
    template: `
        <h3>New Event</h3>
        <hr>
        <div class="col-md-6">
        <h3>[Create event from will go here]</h3>
        <br>
        <br>
            <button type="submit" class="btn btn-primary">Save</button>
            <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
        </div>
    `
})

export class CreateEventComponent{

    constructor(private router: Router){}

    cancel(){
        this.router.navigate(['/events']);
    }
}

Step 2: routes.ts file

import { Routes } from '@angular/router'
import { CreateEventComponent } from './app/events/event-details/create-event.component';
import { EventDetailsComponent } from './app/events/event-details/event-details.component';
import { EventListComponent } from './app/events/event-list.component';

export const appRoutes:Routes = [
    { path: 'events/new', component: CreateEventComponent},
    { path: 'events', component: EventListComponent },
    { path: 'events/:id', component: EventDetailsComponent },    
    { path: '', redirectTo: '/events', pathMatch: 'full' }
]

Step 3: createEventComponent component register in 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';
import { EventDetailsComponent } from './events/event-details/event-details.component';
import { RouterModule } from '@angular/router';
import { appRoutes } from 'src/routes';
import { CreateEventComponent } from './events/event-details/create-event.component';

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

Step 4: add router link in nav 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 [routerLink]="['/events/new']">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>