title: Button @Directive to bind disable attribute via @Input in Angular
body: <p>I'm trying to create a button directive that can receive a boolean via <code>@Input</code> and get bound to the <code>disable</code> attribute of the <code>&lt;button&gt;</code> element.</p>
  
  <p>Here's what I've got so far:</p>
  
  <p><strong>loading-button.directive.ts</strong></p>
  
  <pre><code>@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' : '');
    }
  }
  </code></pre>
  
  <p><strong>template</strong></p>
  
  <pre><code>&lt;button appLoadingButton [loaderState]="submitting"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>In that template's component, the <code>submitting</code> property is set to <code>true</code> or <code>false</code> when convenient.</p>
  
  <p>My problem is that this way it is always disabled and I was expecting that the disable attribute was dynamically changing with the directive.</p>
  
  <p>Any help will be greatly appreciated.</p>