加载屏幕上的角度变化ngIf

Question

on my view screen, my page will look like this

for the download button, I'm using jspdf to generate a pdf file but it will generate something like this

And this is one of my example of the input box

<div class="col-md-2">
    <label for="name">Name :</label>
</div>
<div class="col-md-6">
    <input mdbInputDirective [mdbValidate]="false" type="text" class="form-control" style="border:1px solid;"
    formControlName="address1" disabled>
</div>

How can i make when the user press the download button it will show a loading button (that I will make myself) and the content of the page will change into something like a table or something else and the pdf that has been downloaded will show the table instead of showing the input box and after the loading screen is finish then it will turn back into the normal page.

Answer 1

A common practice to place a loader on Angular apps is the following.

TS

public loading: boolean = false;

public doDownload(): void {
    // Start downloading
    this.loading = true;
    // Do your work
    this.loading = false;
}

HTML

<div *ngIf="loading">Loader</div>
<div *ngIf="!loading">Content</div>

Instead of a Loading message, you could use a loader SVG or https://github.com/airbnb/lottie-web

Also, make sure your change detector is automatically re-rendering the DOM.