How can I prevent page reload when a button is clicked in Angular? I'm developing a quiz application in Angular where I fetch random questions and options from an API. When users select an option, the next question should appear without reloading the page. How can I achieve this functionality without the page reloading?
Typescript File
import { Component, Input, Output, HostListener } from '@angular/core';
import { QuestionService } from './service/question.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Quiz';
newdata: any;
countryNum!: number;
constructor(private questionService:QuestionService) { }
saveCont: any = [];
options:any=[];
saveCap:any=[];
ngOnInit() {
this.questionService.getCountriesJson().subscribe((res: any) => {
this.newdata = res.data;
this.getRandomnames()
})
}
getRandomnames(){
for (let i = 0; i < 5; i++) {
let countryNum = Math.floor(Math.random() * this.newdata.length);
this.saveCont.push(this.newdata[countryNum].name);
this.saveCap.push(this.newdata[countryNum].capital)
}
for (let j = 0; j < 3 ; j++) {
let randomNum = Math.floor(Math.random() * this.newdata.length);
this.options.push(this.newdata[randomNum].capital)
}
}
userIndex:any=0;
event:any
changeIndex(number: number,event:any){
if(this.userIndex>0&&number<0||this.userIndex<=this.saveCont.length && this.userIndex<=this.saveCap.length &&number>0){
this.userIndex+=number;
}
}
HTML File
<h1>Quiz</h1>
<div *ngIf="saveCont && saveCap " class="quescard">
<form >
<h1>What is the capital of{{saveCont[userIndex]}}</h1><br>
<li *ngFor="let cap of options"><button (click)="changeIndex(1,event)" id="id" class="btn btn-primary btn-block btn-lg">{{cap}}</button></li>
<li ><button (click)="changeIndex(1,event)" class="btn btn-primary btn-block btn-lg" id="idx">{{saveCap[userIndex]}}</button></li><br>
</form>
</div>