Tengo un componente que carga una imagen cuando se hace clic en el botón.

Para evitar múltiples clics, quiero ocultar el botón cuando se hace clic, mostrar un texto y volver a habilitar el botón cuando se carga la imagen.

No estoy seguro de por qué este código no funciona.

Aquí está el archivo html:

 <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>

y aquí está el componente.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; } }