Fetching whole data passing id in route Angular 2

Question

i am new in angular 2!

I want to fetch data after i click on the title. i am passing id in routes. i am adding my routes file, my components file and my html file.

**Routes : **

  const routes : Routes = [
  {path: '' , redirectTo : '/blog' , pathMatch : 'full'},
  {path: 'blog' , component: BlogsComponent},
  {path: 'blog/:id', component: BlogDetailComponent},
  {path: '**', component: PageNotFoundComponent}
];

blogs.component.ts

import { Component, OnInit } from '@angular/core';
import {BlogService} from "../services/blog.service";
import {Router, ActivatedRoute, Params} from "@angular/router";
import {Blog} from "../blog";


@Component({
  selector: 'app-blogs',
  template : `
        <h1>My Blog</h1>
        <ul>
          <li *ngFor="let blog of blogs"
              [class.selected]="blog === selectedHero"
              (click)="onSelect(blog)" [routerLink]="['/blog', blog.id]">
            <h3 class="badge">{{blog.title}} ~ Written By: User-{{blog.userId}}</h3>
          </li>
        </ul>

`
})
export class BlogsComponent implements OnInit {

  public errorMessage: string;
  blogs: Blog[];
  selectedHero: Blog;

  constructor(private _blogService : BlogService, private _router: Router , private _activatedRoute : ActivatedRoute) {}

  onSelect(blog){
    this._router.navigate(['/blog' , blog.id])
  }
  ngOnInit() {
    console.log('I am in BlogsComponent');
    this._blogService.getBlog()
      .subscribe( resBlogData => this.blogs = resBlogData ,
        resBlogError => this.errorMessage = resBlogError
      );
  }
}

And

blog-detail.component.ts

import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Params} from "@angular/router";
import {BlogService} from "../services/blog.service";

@Component({
  // selector: 'app-blog-detail',
  template: `

    <p>
      You Selected Blog with Id = {{blogId}}
    </p>

`
})
export class BlogDetailComponent implements OnInit {
  public blogId;
  public blogTitle;
  public blog;
  constructor( private _activatedRoute: ActivatedRoute , private _blogService : BlogService) { }

  ngOnInit(): void {
    this._activatedRoute.params.subscribe((params: Params)=>{
      let id = parseInt(params['id']);
      let title = params['title'];
      this.blogId = id;
      this.blogTitle = title;
      console.log( 'title : ' + this._activatedRoute.snapshot.data['title']);
    });
  }
}

for now i have consoled value of title. But is is undefined. Please, tell me where i am going wrong?

Answer 1

You only have id parameter in url {path: 'blog/**:id**'

but you are trying to get title parameter there is no parameter title.

let title = params['title'];

Also this one this._activatedRoute.snapshot.data['title']); there is no title data

You can get your id with this._activatedRoute.snapshot.paramMap.get('id');