1 view

Adding your first route

bipon68Angular Router

Step 1: events-app.component.ts file

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

@Component({
  selector: 'events-app',
  template: `
    <nav-bar></nav-bar>
    <router-outlet></router-outlet>
    <!-- <events-list></events-list> -->
  `
})
export class EventsAppComponent {
  title = 'ng-fundamentals';
}

Step 2: routes.ts file

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

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

Step 3: app.module.ts file

Register router for routing 

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';

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

Step 4 : index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>NgFundamentals</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <div class="container">
    <events-app></events-app>
  </div>
  
</body>
</html>
added base url

Step 5: event-details.component.ts file

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

@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){}

    ngOnInit(){
        this.event = this.eventService.getEvent(1);
    }
}

Step 6: event.service.ts file

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

@Injectable()
export class EventService{
    getEvents(){
        return EVENTS;
    }

    getEvent(id:number){
      return EVENTS.find(event => event.id === id)
    }
}

const EVENTS = [
    {
      id: 1,
      name: 'Angular Connect',
      date: '9/26/2036',
      time: '10:00 am',
      price: 599.99,
      imageUrl: '/assets/images/angularconnect-shield.png',
      onlineUrl: 'http://google.com',
    },
    {
      id: 2,
      name: 'ng-nl',
      date: '4/15/2037',
      time: '9:00 am',
      price: 950.00,
      imageUrl: '/assets/images/ng-nl.png',
      onlineUrl: 'http://google.com',
      location: {
        address: 'The NG-NL Convention Center & Scuba Shop',
        city: 'Amsterdam',
        country: 'Netherlands'
      },
    {
      id: 3,
      name: 'ng-conf 2037',
      date: '5/4/2037',
      time: '10:00 am',
      price: 759.00,
      imageUrl: '/assets/images/ng-conf.png',
      location: {
        address: 'The Palatial America Hotel',
        city: 'Salt Lake City',
        country: 'USA'
      },
    {
      id: 4,
      name: 'UN Angular Summit',
      date: '6/10/2037',
      time: '8:00 am',
      price: 800.00,
      imageUrl: '/assets/images/basic-shield.png',
      location: {
        address: 'The UN Angular Center',
        city: 'New York',
        country: 'USA'
      },
    {
      id: 5,
      name: 'ng-vegas',
      date: '2/10/2037',
      time: '9:00 am',
      price: 400.00,
      imageUrl: '/assets/images/ng-vegas.png',
      location: {
        address: 'The Excalibur',
        city: 'Las Vegas',
        country: 'USA'
      }
    }
  ]

Step 6: app.module.ts file

Register event details 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';

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

Leave a Reply