Как добавить атрибут отключения в селекторе компонентов?

Question

Я пытаюсь отключить кнопку.Но кнопка - это угловая составляющая.И отключенный атрибут Html5 не может работать на селекторе компонентов.

Я пытался добавить, как это, но не работает: [attr.disabled]="isOpenModal

Код Html кнопки:

 <add-new-button [attr.disabled]="isOpenModal" 
                 (click)="openModal('new')"
                 class="nano-bc-green hover-effect">
 </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 {
}

Открыть модальный метод, который используется для кнопки:

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

Есть идеи для решения?

Answer 1

здесь отключить атрибут

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

это может быть полезно;)

Answer 2

Поскольку ваш add-new-button компонент может быть чем угодно, а disabled не является свойством, которое имеют все элементы, оно не может работать. Проверьте список Глобальные атрибуты .

Вы должны определить собственное disabled свойство:

@Input() disabled: boolean;

И вы можете привязать это к элементам, которые вы хотите отключить, например:

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

Вы можете использовать его следующим образом:

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

Answer 3

Просто поместите отключенную логику в сам метод click:

Шаблон:

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

Машинопись:

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