Softcoded forum + When an answer is opened, make sure the question and answer is properly seen from top.

src/app/reusable-components/forum/forum.component.html

@@ -30,12 +30,18 @@
             <button class="book-mark-button" [ngClass]="{'active' : post.isBookmarked}">
                 <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
             </button>
-            <div [routerLink]="['/forum-post-details']">
+            <div (click)="openPostDetails(post)">
                 <h5>
                     {{ post.question }}
                 </h5>
                 <div class="tags">
-                    <button *ngFor="let tag of post.hashTags"> {{ tag }} </button>
+                    <button *ngFor="let tag of post.friendTags"> @ {{ tag }} </button>
+                </div>
+                <p *ngIf="post.helpLink">
+                    <a href="{{ post.helpLink }}" target="_blank"> Link Related to this Topic </a>
+                </p>
+                <div class="tags">
+                    <button *ngFor="let tag of post.hashTags"> # {{ tag }} </button>
                 </div>
             </div>
             <div class="author">
@@ -44,7 +50,7 @@
                 <span class="time-stamp"> {{ getFormattedDate(post.date) }} </span>
             </div>
             <div class="action-buttons">
-                <button>
+                <button [ngClass]="{'active' : post.isLiked }">
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
                     <span> {{ post.likeCount }} </span>
                 </button>

src/app/reusable-components/forum/forum.component.scss

@@ -258,6 +258,10 @@
         max-height: 50px;
         margin: 15px auto;
         line-height: 1.7;
+
+        a {
+            color: var(--teal);
+        }
     }
 
     .author {
@@ -303,7 +307,7 @@
 
         button {
             background-color: transparent;
-            color: var(--light-grey);            
+            color: var(--light-grey);
             padding: 0 10px;
             height: 30px;
             margin-right: 10px;
@@ -391,7 +395,7 @@
 .comment-list {
     list-style: none;
     margin: 20px auto;
-    padding: 20px 5%;
+    padding: 5px 5% 20px;
     display: none;
     background-color: var(--black);
     border-radius: 10px;
@@ -400,15 +404,30 @@
     .comment {
         margin-bottom: 40px;
 
+        &:last-child {
+            margin-bottom: 0;
+        }
+
         p {
             display: block;
             max-height: none;
+            margin: 10px auto;
+        }
+
+        .author {
+            margin: 10px auto;
         }
 
         &.reply-comment {
             margin-top: 10px;
-            padding-left: 15px;
+            margin-bottom: 0px;
+            padding: 10px;
+            margin-left: auto;
+            width: 99%;
+            background-color: var(--ash-black);
             border-left: 3px solid var(--light-grey);
+            border-top-right-radius: 7px;
+            border-bottom-right-radius: 7px;
         }
     }
 }

src/app/reusable-components/forum/forum.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import * as moment from 'moment';
+import { Router } from '@angular/router';
 
 @Component({
 	selector: 'app-forum',
@@ -21,7 +22,7 @@ export class ForumComponent implements OnInit {
         isLiked: true,
         likeCount: 30,
         hashTags: ['h', 'maxplank', 'quantum physics'],
-        friendTags: ['Rahul'],
+        friendTags: ['Rahul', 'Ballack'],
         helpLink: 'https://en.wikipedia.org/wiki/Planck_constant',
         files: [],
         author: {
@@ -51,7 +52,7 @@ export class ForumComponent implements OnInit {
                     imgSrc: 'https://pbs.twimg.com/profile_images/673997632969117696/6Fm92vaZ_400x400.jpg'
                 },
                 date: new Date(),
-                replyComment: [{
+                replyComments: [{
                     description: 'Yes Bro!',
                     isLiked: false,
                     likeCount: 0,
@@ -60,14 +61,87 @@ export class ForumComponent implements OnInit {
                         imgSrc: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
                     },
                     date: new Date(),
+                }, {
+                    description: 'Just take a look once and ping me in DM',
+                    isLiked: true,
+                    likeCount: 1,
+                    author: {
+                        name: 'Rahul',
+                        imgSrc: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+                    },
+                    date: new Date(),
                 }]
+            }, {
+                description: 'Are you Sure Rahul?',
+                isLiked: true,
+                likeCount: 1,
+                author: {
+                    name: 'Mr Miyagi',
+                    imgSrc: 'https://pbs.twimg.com/profile_images/673997632969117696/6Fm92vaZ_400x400.jpg'
+                },
+                date: new Date(),
+                replyComments: []
+            }]
+        }, {
+            answer: 'Here is a video you can take a look at if you would like to understand more...',
+            isBookmarked: true,
+            isLiked: false,
+            likeCount: 10,
+            friendTags: ['Mr Miyagi'],
+            helpLink: 'https://www.youtube.com/watch?v=tQSbms5MDvY',
+            files: [],
+            author: {
+                name: 'Rahul',
+                imgSrc: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            },
+            date: new Date(),
+            comments: [{
+                description: 'Awesome?',
+                isLiked: true,
+                likeCount: 1,
+                author: {
+                    name: 'Mr Miyagi',
+                    imgSrc: 'https://pbs.twimg.com/profile_images/673997632969117696/6Fm92vaZ_400x400.jpg'
+                },
+                date: new Date(),
+                replyComments: []
+            }, {
+                description: 'Awesome?',
+                isLiked: true,
+                likeCount: 1,
+                author: {
+                    name: 'Mr Miyagi',
+                    imgSrc: 'https://pbs.twimg.com/profile_images/673997632969117696/6Fm92vaZ_400x400.jpg'
+                },
+                date: new Date(),
+                replyComments: []
+            }, {
+                description: 'Awesome?',
+                isLiked: true,
+                likeCount: 1,
+                author: {
+                    name: 'Mr Miyagi',
+                    imgSrc: 'https://pbs.twimg.com/profile_images/673997632969117696/6Fm92vaZ_400x400.jpg'
+                },
+                date: new Date(),
+                replyComments: []
+            }, {
+                description: 'Awesome?',
+                isLiked: true,
+                likeCount: 1,
+                author: {
+                    name: 'Mr Miyagi',
+                    imgSrc: 'https://pbs.twimg.com/profile_images/673997632969117696/6Fm92vaZ_400x400.jpg'
+                },
+                date: new Date(),
+                replyComments: []
             }]
         }]
     }, {
         question: 'How to define "What is a cricle?" question?',
         isBookmarked: true,
         isLiked: false,
-        likeCount: 30,
+        likeCount: 15,
         hashTags: ['maths', 'circle'],
         friendTags: [],
         helpLink: '',
@@ -79,7 +153,7 @@ export class ForumComponent implements OnInit {
         date: new Date(),
         answers: [{
             answer: 'Here is a video you can take a look at if you would like to understand more...',
-            isBookmarked: true,
+            isBookmarked: false,
             isLiked: false,
             likeCount: 10,
             friendTags: ['Mr Miyagi'],
@@ -94,7 +168,9 @@ export class ForumComponent implements OnInit {
         }]
     }];
 
-	constructor() { }
+	constructor(
+        private router: Router
+    ) { }
 
 	ngOnInit(): void {
 
@@ -104,4 +180,8 @@ export class ForumComponent implements OnInit {
         return moment(date).format('MMMM DD, YYYY');
     }
 
+    openPostDetails(post: any) {
+        this.router.navigate(['/forum-post-details', { data: JSON.stringify(post) }]);
+    }
+
 }

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

@@ -1,52 +1,53 @@
-<div class="page">
+<div class="page" *ngIf="postDetails">
     <header class="nav-header">
         <button class="close-button" (click)="back()">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
         </button>
         <h5>
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
-            <span> Can anyone explain dark matter radiation theory in a most simplest
-            way possible? </span>
+            <span> {{ postDetails.question }} </span>
         </h5>
     </header>
 
     <h2 class="question">
-        Can anyone explain dark matter radiation theory in a most simplest
-        way possible?
+        {{ postDetails.question }}
     </h2>
 
     <ul class="forum-post-list">
         <header class="post-header"> Top Answer </header>
 
-        <li class="post" [ngClass]="{'active' : selectedAnswer === 1}">
-            <button class="book-mark-button">
+        <li *ngFor="let answerPost of postDetails.answers; let i = index" class="post"
+        [ngClass]="{'active' : selectedAnswer === i }">
+            <button class="book-mark-button" [ngClass]="{'active' : answerPost.isBookmarked }">
                 <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
             </button>
-            <div (click)="selectedAnswer = 1">
+            <div (click)="openSelectedAnswer(i)" id="answer-{{ i }}">
                 <h5>
-                    It's easy to explain actually
+                    {{ answerPost.answer }}
                 </h5>
-                <p>
-                    You just need to refer to the article updated by IEEE Labs.
+                <div class="tags">
+                    <button *ngFor="let tag of answerPost.friendTags"> @ {{ tag }} </button>
+                </div>
+                <p *ngIf="answerPost.helpLink">
+                    <a href="{{ answerPost.helpLink }}" target="_blank"> Link Related to this Topic </a>
                 </p>
             </div>
             <div class="author">
-                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                <label> Dwayne the Rock </label>
-                <span class="time-stamp"> August 15, 2020 </span>
+                <img src="{{ answerPost.author.imgSrc }}">
+                <label> {{ answerPost.author.name }} </label>
+                <span class="time-stamp"> {{ getFormattedDate(answerPost.date) }} </span>
             </div>
             <div class="action-buttons">
-                <button class="active">
+                <button [ngClass]="{'active' : answerPost.isLiked }">
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
-                    <span> 56 </span>
+                    <span> {{ answerPost.likeCount }} </span>
                 </button>
                 <button>
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
-                    <span> 56 </span>
+                    <span> {{ answerPost.comments.length }} </span>
                 </button>
                 <button>
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
-                    <span> 56 </span>
                 </button>
 
                 <button class="more-button" (click)="showMorePostOptions = true">
@@ -59,267 +60,55 @@
                 ADD A COMMENT
             </button>
 
-            <ul class="comment-list">
-                <li class="comment">
+            <ul class="comment-list" *ngIf="answerPost.comments && answerPost.comments.length > 0">
+                <li class="comment" *ngFor="let comment of answerPost.comments">
                     <div class="author">
-                        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                        <label> Dwayne the Rock </label>
-                        <span class="time-stamp"> August 15, 2020 </span>
+                        <img src="{{ comment.author.imgSrc }}">
+                        <label> {{ comment.author.name }} </label>
+                        <span class="time-stamp"> {{ getFormattedDate(comment.date) }} </span>
                     </div>
                     <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
+                        {{ comment.description }}
                     </p>
                     <div class="action-buttons">
-                        <button (click)="showAddCommentToPost = true">
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
-                            <span> Reply </span>
-                        </button>
-                        <button>
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
-                            <span> 56 </span>
-                        </button>
-
-                        <button class="more-button" (click)="showMorePostOptions = true">
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
-                        </button>
-                    </div>
-
-                    <div class="comment reply-comment">
-                        <div class="author">
-                            <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                            <label> Dwayne the Rock </label>
-                            <span class="time-stamp"> August 15, 2020 </span>
-                        </div>
-                        <p>
-                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
-                        </p>
-                        <div class="action-buttons">
-                            <button class="active">
-                                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
-                                <span> 56 </span>
-                            </button>
-
-                            <button class="more-button" (click)="showMorePostOptions = true">
-                                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
-                            </button>
-                        </div>
-                    </div>
-                </li>
-
-                <li class="comment">
-                    <div class="author">
-                        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                        <label> Dwayne the Rock </label>
-                        <span class="time-stamp"> August 15, 2020 </span>
-                    </div>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
-                    </p>
-                    <div class="action-buttons">
-                        <button (click)="showAddCommentToPost = true">
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
-                            <span> Reply </span>
-                        </button>
-                        <button>
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
-                            <span> 56 </span>
-                        </button>
-
-                        <button class="more-button" (click)="showMorePostOptions = true">
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
-                        </button>
-                    </div>
-                </li>
-            </ul>
-        </li>
-
-        <header class="post-header"> Other Answers </header>
-
-        <li class="post" [ngClass]="{'active' : selectedAnswer === 2}">
-            <button class="book-mark-button">
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
-            </button>
-            <div (click)="selectedAnswer = 2">
-                <h5>
-                    Have you watched the Xenon experiment?
-                </h5>
-                <p>
-                    A spark was created in the lab where there were 56 unknown interactions!!!
-                </p>
-            </div>
-            <div class="author">
-                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                <label> Dwayne the Rock </label>
-                <span class="time-stamp"> August 15, 2020 </span>
-            </div>
-            <div class="action-buttons">
-                <button class="active">
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
-                    <span> 56 </span>
-                </button>
-                <button>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
-                    <span> 56 </span>
-                </button>
-                <button>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
-                    <span> 56 </span>
-                </button>
-
-                <button class="more-button" (click)="showMorePostOptions = true">
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
-                </button>
-            </div>
-
-            <button class="add-comment-button" (click)="showAddCommentToPost = true">
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
-                ADD A COMMENT
-            </button>
-
-            <ul class="comment-list">
-                <li class="comment">
-                    <div class="author">
-                        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                        <label> Dwayne the Rock </label>
-                        <span class="time-stamp"> August 15, 2020 </span>
-                    </div>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
-                    </p>
-                    <div class="action-buttons">
-                        <button (click)="showAddCommentToPost = true">
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
-                            <span> Reply </span>
-                        </button>
-                        <button>
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
-                            <span> 56 </span>
-                        </button>
-
-                        <button class="more-button" (click)="showMorePostOptions = true">
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
-                        </button>
-                    </div>
-                </li>
-
-                <li class="comment">
-                    <div class="author">
-                        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                        <label> Dwayne the Rock </label>
-                        <span class="time-stamp"> August 15, 2020 </span>
-                    </div>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
-                    </p>
-                    <div class="action-buttons">
-                        <button (click)="showAddCommentToPost = true">
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
-                            <span> Reply </span>
-                        </button>
-                        <button>
+                        <button [ngClass]="{'active' : comment.isLiked }">
                             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
-                            <span> 56 </span>
-                        </button>
-
-                        <button class="more-button" (click)="showMorePostOptions = true">
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
+                            <span> {{ comment.likeCount }} </span>
                         </button>
-                    </div>
-                </li>
-            </ul>
-        </li>
-
-
-        <li class="post" [ngClass]="{'active' : selectedAnswer === 3}">
-            <button class="book-mark-button">
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
-            </button>
-            <div (click)="selectedAnswer = 3">
-                <h5>
-                    Have you watched the Xenon experiment?
-                </h5>
-                <p>
-                    A spark was created in the lab where there were 56 unknown interactions!!!
-                </p>
-            </div>
-            <div class="author">
-                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                <label> Dwayne the Rock </label>
-                <span class="time-stamp"> August 15, 2020 </span>
-            </div>
-            <div class="action-buttons">
-                <button>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
-                    <span> 56 </span>
-                </button>
-                <button>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
-                    <span> 56 </span>
-                </button>
-                <button>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
-                    <span> 56 </span>
-                </button>
 
-                <button class="more-button" (click)="showMorePostOptions = true">
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
-                </button>
-            </div>
-
-            <button class="add-comment-button" (click)="showAddCommentToPost = true">
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
-                ADD A COMMENT
-            </button>
-
-            <ul class="comment-list">
-                <li class="comment">
-                    <div class="author">
-                        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                        <label> Dwayne the Rock </label>
-                        <span class="time-stamp"> August 15, 2020 </span>
-                    </div>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
-                    </p>
-                    <div class="action-buttons">
                         <button (click)="showAddCommentToPost = true">
                             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
                             <span> Reply </span>
                         </button>
-                        <button>
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
-                            <span> 56 </span>
-                        </button>
 
                         <button class="more-button" (click)="showMorePostOptions = true">
                             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
                         </button>
                     </div>
-                </li>
 
-                <li class="comment">
-                    <div class="author">
-                        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                        <label> Dwayne the Rock </label>
-                        <span class="time-stamp"> August 15, 2020 </span>
+                    <div *ngIf="comment.replyComments">
+                        <section class="comment reply-comment" *ngFor="let subComment of comment.replyComments">
+                            <div class="author">
+                                <img src="{{ subComment.author.imgSrc }}">
+                                <label> {{ subComment.author.name }} </label>
+                                <span class="time-stamp"> {{ getFormattedDate(subComment.date) }} </span>
+                            </div>
+                            <p>
+                                {{ subComment.description }}
+                            </p>
+                            <div class="action-buttons">
+                                <button [ngClass]="{'active' : subComment.isLiked }">
+                                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
+                                    <span> {{ subComment.likeCount }} </span>
+                                </button>
+
+                                <button class="more-button" (click)="showMorePostOptions = true">
+                                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
+                                </button>
+                            </div>
+                        </section>
                     </div>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
-                    </p>
-                    <div class="action-buttons">
-                        <button (click)="showAddCommentToPost = true">
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
-                            <span> Reply </span>
-                        </button>
-                        <button>
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
-                            <span> 56 </span>
-                        </button>
 
-                        <button class="more-button" (click)="showMorePostOptions = true">
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
-                        </button>
-                    </div>
                 </li>
             </ul>
         </li>

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

@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs';
+import * as moment from 'moment';
 
 @Component({
 	selector: 'app-post-details',
@@ -8,18 +11,44 @@ import { Location } from '@angular/common';
 })
 export class PostDetailsComponent implements OnInit {
     showMorePostOptions: boolean = false;
-    selectedAnswer: number = 1;
+    selectedAnswer: number = 0;
     showAddCommentToPost: boolean = false;
+    routeSubscription: Subscription;
+    postDetails: any;
 
 	constructor(
-        private location: Location
+        private location: Location,
+        private route: ActivatedRoute,
     ) { }
 
 	ngOnInit(): void {
+        this.routeSubscription = this.route.params.subscribe((params) => {
+			this.postDetails = JSON.parse(params['data']);
+            console.log(this.postDetails);
+		});
+	}
+
+    ngOnDestroy() {
+		this.routeSubscription.unsubscribe();
 	}
 
     back() {
         this.location.back();
     }
 
+    getFormattedDate(date: any) {
+        return moment(date).format('MMMM DD, YYYY');
+    }
+
+    openSelectedAnswer(index: number) {
+        this.selectedAnswer = index;
+
+        setTimeout(() => {
+            document.querySelector('#answer-' + index).scrollIntoView({
+                behavior: 'smooth',
+                block: 'center'
+            });
+        }, 100);
+    }
+
 }