title: Angular Bind a value to Directive parameter
body: <p>I'm building a directive which changes a button's text while a condition remains true. For example while saving a from, until it is being processed, the text of the submit button should change to <code>Saving...</code> and as the form submission finished, it should revert back to its original text.</p>
  
  <p>Here is a what I'm trying:</p>
  
  <pre><code>import {Directive, ElementRef, Input, OnInit} from '@angular/core';
  
  @Directive({
    selector: '[LoadingText]'
  })
  export class LoadingTextDirective implements OnInit {
  
    @Input('loadingTextValue') text: string;
    @Input('loadingTextWhen') condition: boolean;
  
    constructor(private elem: ElementRef) {}
  
    ngOnInit() {
      if (this.text &amp;&amp; this.condition) {
          this.elem.nativeElement.innerText = this.text;
      }
    }
  }
  </code></pre>
  
  <p>Here is how I'm using it:</p>
  
  <pre><code>&lt;button LoadingText loadingTextValue="Hold on! Saving..." [loadingTextWhen]="saving" type="button" (click)="onSave()"&gt;Save
                              &lt;/button&gt;
  
  saving: boolean = false;
  </code></pre>
  
  <p>I change <code>saving</code> to true as onSave() function is called and false as it is finished.</p>
  
  <p>How can I bind my directive condition Input to reflect according to the changes on <code>saving</code>.?</p>