如何在组件选择器上添加禁用属性？

Question

I am trying to disable button. But button is angular component. And Html5 disabled attribute cannot work on component selector.

I tried to add like this but does not work: [attr.disabled]="isOpenModal

Button Html code:

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

Button - Component "add new button"

   @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 {
}

Open Modal method which is used on button:

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

Any idea for solution?

Answer 1

Because your add-new-button component can be anything, and disabled is not a property that all elements have, that can't work. Check out the list of Global Attributes .

You have to define your own disabled property:

@Input() disabled: boolean;

And you can bind this to the elements you want to disable like:

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

You can use it like this after:

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

Answer 2

Just put the disabled logic into the click method itself:

Template:

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

TypeScript:

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

Answer 3

here is disable attribute

<my-date-picker [options]="myOptions" [disabled]="disabled" 
                (dateChanged)="onDateChanged($event)"></my-date-picker>

it may be helpful ;)

Answer 4

You can use the CSS selector [ng-reflect-disabled] to trigger the disabled value.

and add [disabled]="isOpenModal" instead of [attr.disabled]="isOpenModal" in your HTML file.

and in your CSS file add the below code:

add-new-button[ng-reflect-disabled="true"] {
  cursor: default;
  pointer-events: none;
}