Angular Router Pain - Examples

crisis-detail-component-01-param.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Crisis }         from './crisis.service';

@Component({
  template: `
  <div *ngIf="crisis">
    <h3>"{{ editName }}"</h3>
    <div>
      <label>Id: </label>{{ crisis.id }}</div>
    <div>
      <label>Name: </label>
      <input [(ngModel)]="editName" placeholder="name"/>
    </div>
    <p>
      <button (click)="save()">Save</button>
      <button (click)="cancel()">Cancel</button>
    </p>
  </div>
  `
})
export class CrisisDetailComponent implements OnInit {
  editName: string;
  crisis: Crisis;

  constructor(
    private route: ActivatedRoute,
    private crisisService: CrisisService
  ) {}

  ngOnInit() {
    this.route.params
      .subscribe((params: { crisisId: number }) => {
        this.crisisService.getCrisis(crisisId).subscribe(crisis => {
          this.editName = crisis.name;
          this.crisis = crisis;
        });
      });
  }
}