title: Angular - Input as function that returns sequential values
body: <p>I have a component in Angular that has an input as a number because it renders differently depending on of it is even or odd in the list. </p>
  
  <p><code>&lt;app-comp [number]=getNumberAndIncrement()&gt;&lt;/app-comp&gt;</code></p>
  
  <p><code>&lt;app-comp [number]=getNumberAndIncrement()&gt;&lt;/app-comp&gt;</code></p>
  
  <p><code>&lt;app-comp [number]=getNumberAndIncrement()&gt;&lt;/app-comp&gt;</code></p>
  
  <p>where</p>
  
  <pre><code>count = 0;
  
  getNumberAndIncrement() {
    return count++;
  }
  </code></pre>
  
  <p>The issue is with the change detection. Obviously that function will return a different value every time it is called. But I just want to pass one value to the component and then forget about it, but it appears Angular would prefer the function for the input has no side effects. The benefit of the function is I can change the order of the components and not have to worry about retooling hard-coded numbers.</p>