Angular routing

TS:

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

import { ActivatedRoute, Params, ParamMap } from '@angular/router';

import { Observable } from 'rxjs';

import { switchMap } from 'rxjs/operators';

import { PostInterface } from '../../../cms-shared/interfaces/post.interface';

import { PostService } from '../../../cms-shared/services/post.service';



@Component({

  selector: 'app-post',

  templateUrl: './post.component.html',

  styleUrls: ['./post.component.scss']

})

export class PostComponent implements OnInit {

  post$: Observable<PostInterface>;



  constructor(

    public activatedRoute: ActivatedRoute,

    private postService: PostService

  ) { }



  ngOnInit(): void {

    this.post$ = this.activatedRoute.paramMap

      .pipe(switchMap((params: ParamMap) => {

        return this.postService.getById(params.get('id'));

      }));



    console.log('id (static)= ', this.activatedRoute.snapshot.paramMap.get('id'));



    this.activatedRoute.paramMap.subscribe((params: ParamMap) => {

      console.log('id (dynamic)=', params.get('id'));

    });



    /* Old way. Params attribute might be deprecated in the future

    https://angular.io/guide/deprecations#activatedroute-params-and-queryparams-properties

    this.post$ = this.activatedRoute.params

      .pipe(switchMap((params: Params) => {

        return this.postService.getById(params.id);

      })); */

  }



}

html:

<div *ngIf="post$ | async as post; else loading">

  <div class="post">

    <h1>{{ post.title }}</h1>



    <div class="post-meta">

      <strong>{{ post.date | date:'medium' }}</strong>

    </div>



    <div class="post-content">

      {{ post.text }}

    </div>

  </div>

</div>



activatedRoute id: {{ (activatedRoute.paramMap | async).get('id') }}



<ng-template #loading>

  <p class="text-center">Loading post...</p>

</ng-template>

Use the snapshot for a one-time grab or a subscription if the parameters can change within the same component/route. If you make an HTTP request within the subscription then use switchMap to cancel any unnecessary pending request (subscriptions).