How to add disable attribute on component selector?

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?

may be you can add a class to change opacity and with pointer-events: none ? — Shashank Vivek
– Shashank Vivek, Commented May 10, 2018 at 10:05
have you tried this? docs.angularjs.org/api/ng/directive/ngDisabled — Leo
– Leo, Commented May 10, 2018 at 10:08
You can add an @Input in your component and bind it to the button you want to disable. — CornelC
– CornelC, Commented May 10, 2018 at 10:10

CornelC · Accepted Answer · 2018-05-10 10:40:44Z

4

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>

edited May 10, 2018 at 10:40

answered May 10, 2018 at 10:15

CornelC

5,3091 gold badge23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Plog · Accepted Answer · 2018-05-10 10:12:39Z

1

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

answered May 10, 2018 at 10:12

Plog

9,6625 gold badges45 silver badges68 bronze badges

2 Comments

James Delaney Over a year ago

Where I should set tu true "isOpenModal" in this case?

James Delaney Over a year ago

This work, but where I should put "isOpenModal = flase" ? Cus When I close the modal, then I can't open again this modal on addNew button. Cus isOpenModal stay on true: public onModalClick() { if (!this.isOpenModal) { this.openModal('new'); this.isOpenModal = true; } }

Rajan Desai · Accepted Answer · 2018-05-10 10:14:38Z

1

here is disable attribute

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

it may be helpful ;)

answered May 10, 2018 at 10:14

Rajan Desai

791 silver badge11 bronze badges

Comments

Ahmed Khairy · Accepted Answer · 2023-01-10 14:33:05Z

0

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

answered Jan 10, 2023 at 14:33

Ahmed Khairy

717 bronze badges

1 Comment

Xriuk Over a year ago

Just a heads up, you shouldn't use any ng-reflect-... selector as they are only for debugging purposes

Collectives™ on Stack Overflow

How to add disable attribute on component selector?

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related