Integrated Faq with Api

src/app/faq/faq.component.html

@@ -26,29 +26,22 @@
 	<ul class="topic-detail" [ngClass]="{'active' : selectedCard }">
 		<div class="heading">
 			<header> General Inquiries </header>
-			<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
 		</div>
 
-		<li>
-			<header> What is the most frequently asked question?
+		<li *ngFor="let allFaq of allFaqs; let index = index">
+			<header> {{allFaq.title}}
 				<button (click)="showDetails = !showDetails" [ngClass]="{'active' : showDetails }">
-					<i class="icon" [ngClass]="{'ion-ios-add-circle-outline': !showDetails , 'ion-ios-remove-circle-outline' : showDetails}"></i>
+					<i class="icon"
+						[ngClass]="{'ion-ios-add-circle-outline': !showDetails , 'ion-ios-remove-circle-outline' : showDetails}"></i>
 				</button>
 			</header>
-			<p *ngIf="showDetails">
-				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus at aliquid voluptatem ut similique vitae odit fuga minima cum. Eveniet, cumque? Rerum eius voluptatem ratione deserunt, quasi non. Accusantium, incidunt.
-			</p>
+			<div class="subquestion">
+				<div *ngFor="let question of allFaq.question">
+					<h3 *ngIf="showDetails">{{question.sub_question}}</h3>
+					<p *ngIf="showDetails">{{question.sub_answer}}</p>
+				</div>
+			</div>
 		</li>
 
-		<li>
-			<header> What is the most frequently asked question?
-				<button (click)="showDetails = !showDetails" [ngClass]="{'active' : showDetails }">
-					<i class="icon" [ngClass]="{'ion-ios-add-circle-outline': !showDetails , 'ion-ios-remove-circle-outline' : showDetails}"></i>
-				</button>
-			</header>
-			<p *ngIf="showDetails">
-				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus at aliquid voluptatem ut similique vitae odit fuga minima cum. Eveniet, cumque? Rerum eius voluptatem ratione deserunt, quasi non. Accusantium, incidunt.
-			</p>
-		</li>
 	</ul>
-</div>
+</div>

src/app/faq/faq.component.scss

@@ -68,6 +68,8 @@
 }
 
 .topic-list {
+	display: flex;
+	flex-direction: column;
 	width: 25%;
 	height: calc(100vh - 200px);
 	overflow: auto;
@@ -227,7 +229,7 @@
 			width: 100%;
 			align-items: center;
 			justify-content: space-between;
-			font-size: 15px;
+			font-size: 20px;
 			font-weight: 500;
 			color: var(--dark-grey);
 			border-bottom: 1px solid #efefef;
@@ -255,17 +257,31 @@
 			}
 		}
 
+		.subquestion{
+			margin-bottom: 20px;
+			margin-top: 10px;
+		}
+
 		p {
 			color: var(--grey);
 			font-size: 13px;
+
+			@media screen and (max-width: 1023px) {
+				margin-top: 0px;
+				font-size: 12px;
+			}
+		}
+		h3 {
+			color: var(--dark-grey);
+			font-size: 16px;
 			line-height: 1.5;
-			margin-top: 15px;
-			padding-bottom: 10px;
+			font-weight: 500;
 
 			@media screen and (max-width: 1023px) {
 				margin-top: 0px;
 				font-size: 12px;
 			}
 		}
+
 	}
 }

src/app/faq/faq.component.ts

@@ -9,14 +9,18 @@ import { FaqService } from '../services/faq.service';
 export class FaqComponent implements OnInit {
 	showDetails: boolean = true;
 	selectedCard: number = null;
+	allFaqs: any = [];
+	selectedQuestions: number = 0;
 
 	constructor(private faqService: FaqService) { }
 
 	ngOnInit() {
-		window.innerWidth <= 1023? this.selectedCard = null: this.selectedCard = 1;
-
-
-        this.faqService.getFaqContent().then(data => console.log(data));
+		window.innerWidth <= 1023 ? this.selectedCard = null : this.selectedCard = 1;
+		this.faqService.mallFaqs().then((response) => {
+			this.allFaqs = response
+		}, err => {
+			console.log("Unable to fetch Faqs")
+		})
 	}
 
 }

src/app/services/faq.service.ts

@@ -6,20 +6,21 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
     providedIn: 'root'
 })
 export class FaqService {
-    
+
     constructor(
         private http: HttpClient
     ) { }
 
-    getFaqContent() {
+    async mallFaqs() {
         const httpOptions = {
-			headers: new HttpHeaders({
-				'Access-Control-Allow-Origin': '*',
-				'Content-Type': 'application/json',
-				'Authorization': 'Bearer ' + localStorage.token
-			})
-		};
-        return this.http.get(URL + '/api/maioraservice/faq/getall/', httpOptions).toPromise();
+            headers: new HttpHeaders({
+                'Access-Control-Allow-Origin': '*',
+                'Content-Type': 'application/json',
+                'Authorization': 'Bearer ' + localStorage.access_Token
+            })
+        };
+
+        return await this.http.get(URL + '/api/maioraservice/faq/getall/', httpOptions).toPromise()
     }
 
 }