Button @Directive to bind disable attribute via @Input in Angular

Question

I'm trying to create a button directive that can receive a boolean via @Input and get bound to the disable attribute of the <button> element.

Here's what I've got so far:

loading-button.directive.ts

@Directive({ selector: '[appLoadingButton]' })
export class LoadingButtonDirective implements OnInit {
  @Input() loaderState: boolean;

  constructor(private renderer: Renderer2, private el: ElementRef) { }

  ngOnInit() {
    this.renderer.setAttribute(this.el.nativeElement, 'disabled', this.loaderState ? 'disabled' : '');
  }
}

template

<button appLoadingButton [loaderState]="submitting"></button>

In that template's component, the submitting property is set to true or false when convenient.

My problem is that this way it is always disabled and I was expecting that the disable attribute was dynamically changing with the directive.

Any help will be greatly appreciated.

Well you only set the attribute onInit and since it is not defined as observable, than you never change the state back and forth — Igor Dimchevski
– Igor Dimchevski, Commented Jun 11, 2018 at 13:09

Poul Kruijt · Accepted Answer · 2018-06-11 13:11:29Z

13

There are multiple options. One would be to use @HostBinding, and that would be all you need for this:

@Directive({ selector: '[appLoadingButton]' })
export class LoadingButtonDirective {
  @Input() 
  @HostBinding('disabled')
  loaderState: boolean;
}

answered Jun 11, 2018 at 13:11

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

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

1 Comment

Poul Kruijt Over a year ago

@Genís you're welcome :) 99.9% of the time you really don't need the renderer

Collectives™ on Stack Overflow

Button @Directive to bind disable attribute via @Input in Angular

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related