Understanding Router State in Angular 7: Passing Data Through Angular RouterState

ng new my-blog-app

ng g c home
ng g c categories
ng g c blogs-by-category

ng g service services/main

[
 {
   "id":1,
   "name":"App Development"
 },
 {
   "id":2,
   "name":"Blockchain Development"
 },
 {
   "id":3,
   "name":"Cryptocurrency"
 },
]

[
 {
   "title": "How to contribute to Open Source?",
   "description":"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt ducimus aliquam nulla nobis quo mollitia rem nisi dolore alias natus dignissimos dolores eum aliquid officiis error dolorem, minima repellat cumque!",
   "keywords":"open-source, software, contribution",
   "meta_desc":"lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt ducimus aliquam nulla nobis quo mollitia rem nisi dolore alias natus dignissimos dolores eum aliquid officiis error dolorem, minima repellat cumque!",
   "category":"Open Source"
 },
 {
   "title":"Angular Vs React Vs Vue.js",
   "description":"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt ducimus aliquam nulla nobis quo mollitia rem nisi dolore alias natus dignissimos dolores eum aliquid officiis error dolorem, minima repellat cumque!",
   "keywords":"angular, angular.js , react, react.js , vue, vue.js",
   "meta_desc":"lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt ducimus aliquam nulla nobis quo mollitia rem nisi dolore alias natus dignissimos dolores eum aliquid officiis error dolorem, minima repellat cumque!",
   "category":"Web Development"
 },
 {
   "title":"Objective C or Swift, What to choose for iOS development",
   "description":"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt ducimus aliquam nulla nobis quo mollitia rem nisi dolore alias natus dignissimos dolores eum aliquid officiis error dolorem, minima repellat cumque!",
   "keywords":"iPhone, iOS, software, mobile development",
   "meta_desc":"lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt ducimus aliquam nulla nobis quo mollitia rem nisi dolore alias natus dignissimos dolores eum aliquid officiis error dolorem, minima repellat cumque!",
   "category":"App Development"
 },
]

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
 
@Injectable({
 providedIn: 'root'
})
 
export class MainService {
 
 constructor(private http: HttpClient) { }
 
 getAllCategories() {
   return this.http.get('assets/categories.json');
 }
 
 getBlogByCategory(): Observable {
   return this.http.get('assets/blog-list.json');
 }
}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BlogsByCategoryComponent } from './blogs-by-category/blogs-by-category.component';
import { CategoriesComponent } from './categories/categories.component';
 
const routes: Routes = [
 {
   // Empty path that will redirect to categories page.
   path: '',
   redirectTo: 'home',
   pathMatch: 'full'
 },
 {
   // Display home component of the blog
   path: 'home',
   component: HomeComponent
 },
 {
   // Displays list of blog categories
   path: 'categories',
   component: CategoriesComponent
 },
 {
   // Displays list of blogs with the selected category
   path: 'blogs-by-category',
   component: BlogsByCategoryComponent
 }
];
 
@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

<header class="header">
 <h2 class="logo"><a routerLink="/">My Blog</a></h2>
 <ul class="main-nav">
   <li><a routerLink="/">Home</a></li>
   <li><a routerLink="categories">Categories</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">About Us</a></li>
 </ul>
</header>
 
<router-outlet></router-outlet>

<div class="welcome-text">
 <h3>Welcome to my blog please choose a <em><a routerLink="/categories">category</a></em> for blog content to display.</h3>
</div>

<ul>
  <li *ngFor="let category of categories">
    <a routerLink="/blogs-by-category"    [state]="category">{{category.name}}</a>
  </li>
</ul>

import { Component, OnInit } from '@angular/core';
import { MainService } from '../services/main.service';
 
interface Categories {
 name: String;
}
 
@Component({
 selector: 'app-categories',
 templateUrl: './categories.component.html',
 styleUrls: ['./categories.component.css']
})
 
export class CategoriesComponent implements OnInit {
 public categories: Categories[] = [];
 constructor(private mainService: MainService) { }
 
 
 ngOnInit(): void {
   // Calling the below method to load the service when component loads.
   this.getAllCategories();
 }
 
 getAllCategories() {
   // We’re subscribing to service to get a list of categories available.
   this.mainService.getAllCategories().subscribe((listCategories: any) => this.categories.push(...listCategories));
 }
}

<!-- Here we are looping through each blog object to display on html --> 
<div *ngFor="let blog of blogs">
 <h3>{{blog.title}}</h3>
 <p>{{blog.description}}</p>
</div>

import { Component, OnInit } from '@angular/core';
import { MainService } from '../services/main.service';
 
interface Blog {
 title: String;
 description: String;
 keywords: String;
 meta_desc: String;
 category: String;
}
 
@Component({
 selector: 'app-blogs-by-category',
 templateUrl: './blogs-by-category.component.html',
 styleUrls: ['./blogs-by-category.component.css']
})
export class BlogsByCategoryComponent implements OnInit {
 public blogs: Blog[] = [];
 constructor(private mainService: MainService) { }
 
 ngOnInit(): void {
   const selectedCategory = history.state.name // Here we got our selected category object and we access the name of the category using object key.
   this.getBlogsByCategory(selectedCategory);
 }
 
 getBlogsByCategory(category: string) {
   this.mainService.getBlogByCategory()
     .subscribe((blogs: Blog[]) => {
       this.blogs.push(...blogs.filter(blog => blog.category === category)); // Filter based on selected category.
     });
 }
 
}

git clone https://github.com/aamita96/my-blog-app.git