sonicoder86

import { Component } from '@angular/core';
import headerTemplate from './header.component.html';
import headerStyle from './header.component.css';

@Component({
  selector: 'my-app',
  template: headerTemplate,
  styles: [headerStyle]
})
export class HeaderComponent implements OnInit {

sonicoder86

// components/app/app.component.ts
import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprected';

import { HeroesComponent } from './components/heroes/heroes.component';
import { HeroDetailComponent } from '../hero-detail/hero-detail.component';

@RouteConfig([
  {
    path: '/',

sonicoder86

// routes.ts
import { provideRouter, RouterConfig } from '@angular/router';

import { HeroesComponent } from './components/heroes/heroes.component';
import { HeroDetailComponent } from './components/hero-detail/hero-detail.component';

export const appRoutes: RouterConfig = [
  { path: '', component: HeroesComponent, terminal: true },
  { path: 'detail/:id', component: HeroDetailComponent }
];

sonicoder86

// main.ts
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { AppComponent } from './components/app/app.component';

bootstrap(AppComponent, [
  ROUTER_PROVIDERS
]);

sonicoder86

// main.ts
import { APP_ROUTER_PROVIDER } from './routes';
import { AppComponent } from './components/app/app.component';

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDER
]);

sonicoder86

<a [routerLink]="['/Heroes']">Heroes</a>
<a [routerLink]="['/HeroDetail', { id: 1 }]">Captain America</a>

sonicoder86

<a [routerLink]="['']">Heroes</a>
<a [routerLink]="['detail', 1]">Captain America</a>

sonicoder86

// navigates to Captain America's page
this.router.navigate(['detail', 1]);

sonicoder86

// components/hero-detail/hero-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { RouteParams } from '@angular/router-deprected';

import { HeroService } from '../../services/hero/hero.service'

@Component({ ... })
export class HeroDetailComponent implements OnInit {
  constructor(private params: RouteParams, private heroService: HeroService) {}

sonicoder86

// components/hero-detail/hero-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { HeroService } from '../../services/hero/hero.service'

@Component({ ... })
export class HeroDetailComponent implements OnInit {
  constructor(private route: ActivatedRoute, private heroService: HeroService) {}