html - ¿Cómo agregar el atributo disable en un selector de componente?

Estoy tratando de desactivar el botón. Pero el botón es un componente de Angular. Y el atributo disabled de HTML5 no puede funcionar en el selector del componente.

Intenté agregarlo así pero no funciona: [attr.disabled]="isOpenModal

Código HTML del botón:

 <add-new-button [attr.disabled]="isOpenModal" 
                 (click)="openModal('new')"
                 class="nano-bc-green hover-effect">
 </add-new-button>

Botón - Componente "añadir nuevo botón"

   @Component({
    selector: 'nano-add-new-button',
    template: `
              <div class='nano-f-r nano-f'>
                    <i class='fa fa-plus'></i>
                    <span class='nano-ml-5'>
                        Add New
                    </span>
              </div>`
})
export class NanoAddNewButtonComponent {
}

Método Abrir Modal que se utiliza en el botón:

public openModal(id: string): void {
        const data = {id: id};
        this.modalModel.add(AudienceModel.ENTITY_NAME, data);
}

¿Alguna idea para la solución?

Respuesta #1

Porque tu componente add-new-button puede ser cualquier cosa, y disabled no es una propiedad que todos los elementos tengan, eso no puede funcionar. Revisa la lista de Atributos Globales.

Tienes que definir tu propia propiedad disabled:

@Input() disabled: boolean;

Y puedes vincular esto a los elementos que quieres desactivar como:

<button [disabled]="disabled">My button</button>

Puedes usarlo así después:

 <add-new-button [disabled]="isOpenModal"
             (click)="openModal('new')"
             class="nano-bc-green hover-effect">
 </add-new-button>

Respuesta #2

Simplemente pon la lógica deshabilitada en el propio método de clic:

Plantilla :

 <add-new-button (click)="onModalClick()"
                 class="nano-bc-green hover-effect">
 </add-new-button>

TypeScript :

onModalClick() {
    if (!this.isOpenModal) {
      this.openModal('new');
    }
}