CODEWITHSUNDEEP
htmlangulartypescript
James Delaney
James Delaney

Reputation: 1776

How to add disable attribute on component selector?

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?

Upvotes: 3

Views: 8729

Answers (4)

Ahmed Khairy
Ahmed Khairy

Reputation: 61

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;
}

Upvotes: 0

CornelC
CornelC

Reputation: 5254

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>

Upvotes: 4

Rajan Desai
Rajan Desai

Reputation: 79

here is disable attribute 

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

it may be helpful ;)

Upvotes: 1

Plog
Plog

Reputation: 9612

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');
    }
}

Upvotes: 1

Related Questions