feat(post) : add service + logic call api + display post details

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

@@ -37,6 +37,6 @@ export class PostCardComponent implements OnInit {
     }
   }
   public showDetails(post: Post): void {
-    this.router.navigateByUrl('posts/details/' + post.id);
+    this.router.navigateByUrl('posts/details/' + post.id, { state: { data: post } });
   }
 }

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

-<p>post-details works!</p>
+<div *ngIf="post">
+  <h2>{{ post.title }}</h2>
+</div>
+
+<button (click)="backToPosts()">Retour</button>

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

 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Post } from '../../models/post.model';
+import { PostService } from '../../services/post.service';
 
 @Component({
   selector: 'app-post-details',
@@ -7,10 +9,21 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./post-details.component.scss'],
 })
 export class PostDetailsComponent implements OnInit {
-  constructor(private activatedRoute: ActivatedRoute) {}
-  postId: string;
+  constructor(private activatedRoute: ActivatedRoute, private router: Router, private postService: PostService) {}
+  post: Post;
   ngOnInit(): void {
-    this.postId = this.activatedRoute.snapshot.paramMap.get('id');
-    console.log(this.postId);
+    if (history.state.data) {
+      this.post = new Post(history.state.data);
+    } else {
+      const postId = this.activatedRoute.snapshot.paramMap.get('id');
+      this.postService.getPost(postId).subscribe((post) => {
+        this.post = post.posts[0];
+        console.log(this.post);
+      });
+    }
+  }
+
+  public backToPosts(): void {
+    this.router.navigateByUrl('/posts');
   }
 }

src/app/post/models/post.model.ts

@@ -9,4 +9,8 @@ export class Post {
   html: string;
   author: string;
   tags: Tag[];
+
+  constructor(obj?: any) {
+    Object.assign(this, obj);
+  }
 }

src/app/post/services/post.service.ts

@@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { Post } from '../models/post.model';
 import { PostWithMeta } from '../models/postWithMeta.model';
 
 @Injectable({
@@ -11,6 +12,12 @@ export class PostService {
   private readonly baseUrl = 'api/posts';
   constructor(private http: HttpClient) {}
 
+  public getPost(idPost: string): Observable<PostWithMeta> {
+    return this.http
+      .get<PostWithMeta>(`${this.baseUrl}/` + idPost)
+      .pipe(map((item: PostWithMeta) => new PostWithMeta(item)));
+  }
+
   public getPosts(tags?: string[]): Observable<PostWithMeta> {
     if (!tags) {
       return this.http