title: Angular - Is binding a component method to DOM target property a wrong practice?
body: <p>Say, I have a component which is used as following:</p>
  
  <pre><code> &lt;health-renderer
        [health]="getHealth()"
        [label]="label"&gt;
   &lt;health-renderer&gt;
  </code></pre>
  
  <p>After reading data-binding related parts from <a href="https://angular.io/guide/template-syntax" rel="noreferrer">https://angular.io/guide/template-syntax</a>, it seem like the way I am setting target component property <code>health</code> is wrong as the template expression used is <code>getHealth()</code> which is a method. And method binding should only be done with events, not properties. In other words, template expression (the thing on right-hand side of <code>=</code>) need to be a template variable, template reference variable or a component/directive/element property.  </p>
  
  <p>If <code>[target]="methodCall()"</code> is a wrong way of doing binding, then why is it allowed by Angular? If this is the right way of doing binding then is my understanding given in last paragraph wrong?</p>
  
  <p>Also, how should I then modify my code to reflect the right thing for:</p>
  
  <ol>
  <li>Showing current health which is say, just a progress bar</li>
  <li>Automatically call <code>getHealth(): integer</code> which contains business logic for calculating health. 0 will show nothing on progress bar for health. 100 will fill up the progress bar. </li>
  </ol>
  
  <p>Lastly, I noticed getHealth() getting called like 10-20 times for no reason on each mouse move or click. May be binding a method to a target property is not a good practice because of this change-detection behavior of Angular? </p>