Disable a custom button from directive

0
votes

I have a custom button like:

<my-button [permission]="'NONE'" [disabled]="!projectForm.valid" type="submit">
   Save
</my-button>

If the permissions are 'NONE' I have to disable a button. Therefore I am doing this in directive:

permission.directive.ts

@Input() public readonly permission: string;

constructor(
    private readonly element: ElementRef,
    private readonly ref: ChangeDetectorRef
) {}

public ngOnInit() {
    if (this.permission === 'NONE') {
       this.element.nativeElement.disabled = true;
   }
}

How ever, it doesn't disable the button. I tried changing the button color and that works perfectly:

this.element.nativeElement.style.color = 'blue';

Since the color changing worked, I thought I might need to trigger the Change Detection:

this.element.nativeElement.disabled = true;
this.element.nativeElement.style.color = 'blue';

The result is still the same, color is changed but the button is not disabled.

Since my-button is a wrapper of button, I tried disabling the button element itself, but the result was the same (Not disabled). 

this.element.nativeElement.children[0].disabled = true;

After that I thought since the style.color worked, setting it's style.display to 'none' could also work. Unfortunately that didn't work out either. Does anyone have a clue why changing it's color works perfectly, but changing the disabled or display state doesn't?

4
angular
[permission]="'NONE'" is the same as just permission="NONE". Square brackets are used for interpolating members of the component. - Maximillion Bartango
I've noticed you have included ChangeDetectorRef but not used it, have you tried ref.detectChanges()? - Maximillion Bartango
@Max Sorry, I forgot to put it here. Yes I used ref.detectChanges(). And regarding square brackets, I am aware of it. I adapted the code for this question and just encapsulated the string with ''. - Dino

4 Answers

0
votes

Instead of using the ElementRef (use with care as Angular official documentation states here because of XSS attacks) or any custom directive you can make use of CSS class to achieve the same behavior.

The following CSS class may apply to buttons and you can create custom ones for different elements.

.disabled {
   pointer-events: none;
   user-select: none;
   color: grey;
   cursor: none;
}
0
votes

Why not just:

<my-button [disabled]="!projectForm.valid || permission === 'NONE'" type="submit">
   Save
</my-button>
0
votes

@Dino, use a getter to set Disabled element.nativeElement

@Input()
set disabled(value)
{
     this.element.nativeElement.disabled = value; 
}
<my-button [disabled]="!projectForm.valid || permission === 'NONE'" ..>

//or
@Input()
set disabled(value)
{
     this.element.nativeElement.disabled = value || this.permision=='NONE'; 
}
<my-button [permission]="'NONE'" [disabled]="!projectForm.valid"...>
0
votes

try to use ngAfterViewChecked().

export class TutorialDirective implements AfterViewChecked {
disable = true;

constructor(private el: ElementRef) { }

ngAfterViewChecked(): void {
  this.el.nativeElement.disabled = true;
  }
}