Component does not render again

Question

I have a component that your rendering should change based on @Input property..

    <p-button *ngIf="loading!=active"
     [label]="'enable - title'"
     [icon]="icon"
     [iconPos] ="iconPos"
     [style] ="style"
     [styleClass] = "styleClass"
     [disabled] = "disabled"
     (onClick)="handleButtonClicked($event)"
     (onFocus) = "handleButtonFocused($event)"
     (onBlur) = "handleButtonBlured($event)"
>
</p-button>
<p-button *ngIf="loading==active"
     [label]="'disable - title'"
     [icon]="iconDisabled"
     [iconPos] ="iconPos"
     [disabled] = "loading"
     [style] ="style"
     [styleClass] = "styleClass"   >
</p-button>

use loading to change icon and disable button (edited). the idea is that by clicking the button I change the behavior of the button (different icon and disabled Bt)

export class PureBtComponent implements OnInit {
 public active :string = 'activeLoading$!$@$@#%#¨$¨$&';
 @Input() loading : any = '';
  //ao clicar no botão
  @Output() onClick = new EventEmitter();

 uso o loading pra mudar o icone e desabilitar o botão (edited) 
  handleButtonClicked($event) {
    this.loading = this.active;   
    this.onClick.emit($event);
  }

component call

<pure-bt 
   title="Agendar" 
   icon="pi pi-key"
   [loading]="loadingPureBT"
   (onClick)="agendar($event)" >
</pure-bt>

scheduling method

agendar(ret){

    setTimeout(() => {
      this.msg="Agendadoooo";
      this.loadingPureBT = '';
  }, 2000);

  }

in the schedule method I change the loadingPureBT and this should change the rendering of the component, but nothing happens...

Answer 1

I found the answer for whoever’s interested. needs to return the variable to whom called through the output Decorator..

private _loading: boolean;
@Input()
set loading(value: boolean) {
 this.loadingChange.emit(value);
 this._loading = value;
}
get loading(): boolean {
return this._loading;
}
@Output()
loadingChange: EventEmitter<boolean> = new EventEmitter<boolean>();

and in the template..

<p-button *ngIf="!loading">....</p-button>  <p-button *ngIf="loading">....</p-button>

that way the call from the button was like

<pure-bt
  title="Agendar"
  icon="pi pi-key"
  [(loading)]="loadingPureBT"
  (onClick)="agendar($event)" >
</pure-bt>