task#17 read route params

Read and Use AuctionDetail Parameters

• Subscribe the ActivatedRouter
• Log the auction.id (from ActivatedRoute.params observer) to the console

Result

Start the test-auction-api server in a second console with $ test-auction-api if not yet running.

Compile and start the application with

$ ng serve

Open project in browser

• Open your browser with the address http://localhost:4200/
• Click in the list on a auction-list-detail item. It shall navigate to a AuctionDetail (/auctions/id)
• Open in your browser the development tools. Check the log output. It will display 1, 2 or 3.

Hints

class AuctionDetailComponent

We create a constructor containing all neccessary injections for its operation, namely AuctionDataService, ActivatedRoute and Router. The ActivatedRoute we can subscribe and extract the id from the params.

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {AuctionDataService} from '../shared/auction-data.service';
import {Subscription} from 'rxjs';

@Component({
  selector: 'app-auction-detail',
  templateUrl: './auction-detail.component.html',
  styleUrls: ['./auction-detail.component.scss']
})
export class AuctionDetailComponent implements OnInit {

  private routeSubscription: Subscription;

  constructor(private auctionDataService: AuctionDataService,
              private route: ActivatedRoute,
              private router: Router) {

  }

  ngOnInit() {
    this.routeSubscription = this.route.params.subscribe(params => {
      console.log(params['id']);

    });
  }

  ngOnDestroy() {

    if (this.routeSubscription != null) {
      this.routeSubscription.unsubscribe();
    }
  }
}