I have created a component to manage the buttons that I use in my website (styles, type, status…), the buttons are from primeng. The problem I have is that when I use them in any component it works fine except the “disabled” property, it applies an opacity but it allows me to click it. When I test directly the p-button of primeng the “disabled” function works correctly, I don’t understand what is wrong in my code, use Angular 18 and typescript.

This would be the component of the button I created:

@if(getIsDisabled()){
<button
  pButton
  [type]="getType()"
  [label]="label"
  [class]="getTypeUI()"
  [ngClass]="{ selected: isSelected }"
  [disabled]="true"
  style="border-radius: 4px; height: 40px"
>
  @if(icon && !isLoading){<sa-icon [icon]="icon"></sa-icon>} @if(isLoading){<i
    class="pi pi-spin pi-spinner me-2"
    style="font-size: 20px"></i>}</button>} 
@else {
<button
  pButton
  [type]="getType()"
  [label]="label"
  [class]="getTypeUI()"
  [ngClass]="{ selected: isSelected }"
  style="border-radius: 4px; height: 40px"
>
  @if(icon && !isLoading){<sa-icon [icon]="icon"></sa-icon>} @if(isLoading){<i
    class="pi pi-spin pi-spinner me-2"
    style="font-size: 20px"
  ></i
  >}</button
>}



  

Typescript

  export class SaButtonComponent {
  @Input() typeUI: 'primary' | 'secondary' = 'primary';
  @Input() icon?: Icon;
  @Input() label: string = 'Button';
  @Input() isDisabled: boolean = false;
  @Input() isSubmit: boolean = false;
  @Input() isSelected: boolean = false;
  @Input() isLoading: boolean = false;

  clase: String = '';

  getTypeUI(): string {
    this.isDisabled ? (this.clase = 'disabled-pointer') : (this.clase = '');

    if (this.icon) return `p-button-${this.typeUI} px-3`;
    return `p-button-${this.typeUI} px-3`;
  }

  getIsDisabled(): boolean {
    return this.isDisabled === true;
  }

  getType(): string {
    return this.isSubmit === true ? 'submit' : 'button';
  }
}

Example:

<sa-button
      typeUI="primary"
      label="Add dignatory"
      (click)="onClicAddSignatory()"
      [icon]="iconAdd"
      [isDisabled]="true"
    ></sa-button>

The sa-button module is imported and exported, otherwise it works correctly.