Just dipping my toes into the world of Angular by creating a quiz app to gain some hands-on experience. Successfully receiving a random set of questions from the API, but now facing the challenge of iterating over this array to implement the gameplay. The aim is to display one question at a time and update the score upon selecting the correct answer.
Not expecting a complete solution here. The resources I've consulted so far cater to simpler applications, leaving me unsure about their applicability in my scenario. Any high-level overview or a couple of next steps would be greatly appreciated.
The API call is made in the 'parent' component responsible for rendering the question, which in turn serves as the parent for displaying the answers.
Coming from a React background, my instinct is to manage state where the API request is issued and pass it down through props for rendering. Uncertain how this aligns with Angular's approach.
Sharing my api.service.ts file:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable({
providedIn: 'root',
})
export class apiService {
constructor(private http: HttpClient) {}
apiURL = 'http://localhost:8080';
httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
}),
};
getQuiz(category: any) {
console.log('bacon');
return this.http.get(this.apiURL + '/quiz/' + category).subscribe((res) => {
console.log(res);
})
}
}
Confirms that console.log(res) is functional.
Next, my game-window.component.ts file:
import { Component, OnInit } from '@angular/core';
import { apiService } from '../shared/services/api.service';
@Component({
selector: 'game-window',
templateUrl: './game-window.component.html',
styleUrls: ['./game-window.component.css'],
})
export class GameWindowComponent implements OnInit {
constructor(private _apiService: apiService ) {
}
ngOnInit() {
this._apiService.getQuiz(window.location.pathname.split('/')[1]);
}
}
Fairly new to TypeScript overall, so uncertain about the syntax required to persist the expression within ngOnInit()
Any guidance, even a basic step-by-step outline in plain language, would be incredibly helpful. Thanks!