fix(post) : fix routing lazy

src/app/post/components/post-card/post-card.component.html

-<div fxLayout="column" *ngIf="post" class="post" [ngClass]="class" fxLayoutGap="12px">
+<div fxLayout="column" *ngIf="post" class="post" [ngClass]="class" fxLayoutGap="12px" (click)="showDetails(post)">
   <div fxLayout="column" fxLayoutGap="4px">
     <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="getIconOfTag(post.tags[0].slug)">
       <app-svg-icon

src/app/post/components/post-card/post-card.component.scss

@@ -2,7 +2,8 @@
 @import '../../../../assets/scss/typography';
 
 .post {
-  padding: 24px 6px;
+  cursor: pointer;
+  margin: 24px 6px;
   border-bottom: 1px dashed $grey-3;
   &.bigNew {
     border: 0;

src/app/post/components/post-card/post-card.component.ts

 import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { TagEnum } from '../../enum/tagEnum.enum';
 import { Post } from '../../models/post.model';
 
@@ -11,14 +12,9 @@ export class PostCardComponent implements OnInit {
   @Input() post: Post;
   @Input() class: string;
   test: string;
-  constructor() {}
+  constructor(private router: Router) {}
 
-  ngOnInit(): void {
-    /*ùif (this.post) {
-      console.log(this.post);
-      this.test = this.post.html.replace(/<[^>]*>/g, '');
-    }*/
-  }
+  ngOnInit(): void {}
 
   getIconOfTag(tag: string): string {
     switch (tag) {
@@ -40,4 +36,7 @@ export class PostCardComponent implements OnInit {
         return null;
     }
   }
+  public showDetails(post: Post): void {
+    this.router.navigateByUrl('posts/details/' + post.id);
+  }
 }

src/app/post/components/post-details/post-details.component.ts

 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-post-details',
   templateUrl: './post-details.component.html',
-  styleUrls: ['./post-details.component.scss']
+  styleUrls: ['./post-details.component.scss'],
 })
 export class PostDetailsComponent implements OnInit {
-
-  constructor() { }
-
+  constructor(private activatedRoute: ActivatedRoute) {}
+  postId: string;
   ngOnInit(): void {
+    this.postId = this.activatedRoute.snapshot.paramMap.get('id');
+    console.log(this.postId);
   }
-
 }

src/app/post/post-routing.module.ts

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { PostDetailsComponent } from './components/post-details/post-details.component';
+import { PostListComponent } from './components/post-list/post-list.component';
 import { PostComponent } from './post.component';
 
-const routes: Routes = [{ path: '', component: PostComponent }];
+const routes: Routes = [
+  {
+    path: '',
+    component: PostComponent,
+    children: [
+      {
+        path: '',
+        component: PostListComponent,
+      },
+      {
+        path: 'details/:id',
+        component: PostDetailsComponent,
+      },
+    ],
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],

src/app/post/post.component.html

 <app-post-header></app-post-header>
-<app-post-list></app-post-list>
+<router-outlet></router-outlet>

src/assets/scss/_color.scss

@@ -7,7 +7,7 @@ $grey-1: #333333;
 $grey-2: #4f4f4f;
 $grey-3: #828282;
 $grey-4: #bdbdbd;
-$grey-6: #f2f2f2;
+$grey-6: #f8f8f8;
 /* form colors */
 $green-1: #47c562;
 /* Status colors */