I have a component that loads an image when the button is clicked.

To avoid multiple clicks, I want to hide the button when clicked, display a text and re enable the button when the image is loaded.

I'm not sure why this code doesn't work.

Here's the html file:

<div class="row">
    <img [src]="url ? url : 'assets/image/evolution_s.png'" class="gan_generated mx-auto d- 
     block" alt="it is sad :'(">
    <img [src]="url ? url : 'assets/image/evolution_s.png'" class="gan_generated mx-auto d- 
     block" alt="it is sad :'(">
</div>
<div *ngIf="this.isClicked==false else waitBlock">
  <button type="button"
          class="btn btn-outline-primary mx-auto d-block"
          (click)="generate_and_show()">Generate Anime Faces</button>
</div>
<ng-template #waitBlock><p class="text-center">Please wait for the artist</p></ng-template>

and here's the component.ts:

export class GanComponent implements OnInit {
    public isClicked = false;

    constructor(private ganService: ImageGanService,
          private sanitizer: DomSanitizer) {
    }

    url: SafeUrl;

    ngOnInit(): void {
    }

    generate_and_show(): void {
        this.isClicked = true;
        this.ganService.request_image()
        .subscribe(response => {
          this.url = 
          this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(response));
        });
        this.isClicked = false;
    }
}