I'm currently working on an Angular single page application. When a user clicks a button, the page refreshes and a message is supposed to be displayed.
(TYPESCRIPT)
import { Component, OnInit, OnDestroy } from '@angular/core';
export class newComponent implements OnInit, OnDestroy {
showAlertMessage = false;
buttonClicked(dataElement: DataModel): void {
this.restService.postAction(dataElement, 'a new record is being inserted').subscribe();
window.location.reload();
this.showAlertMessage = true;
}
(HTML)
<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8">
<th mat-header-cell *matHeaderCellDef> Header </th>
<td mat-icon *matCellDef="let element">
<button (click)="buttonClicked(element)">No Data To Report</button>
</td>
</table>
<div class="alert alert-primary" *ngIf="showAlertMessage" role="alert">
This is a primary alert—check it out!
</div>
I've encountered an issue where the alert message briefly appears, then disappears during the page refresh caused by clicking the button. How can I ensure that the page reloads first before displaying the message? Currently, the message doesn't show up after the window.location.reload() call in the buttonClicked() method.