title: Angular 8 | Dynamic keydown binding in template
body: <h2>Background</h2>
  
  <p>My template generates a sequence of buttons which are numbered by an index from <code>0 to 9</code>.</p>
  
  <p>Each button has to listen to a unique and numeric <code>(keydown.[0...9])</code> event.</p>
  
  <h2>Problem</h2>
  
  <p>This works of course:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button
    (document:keydown.0)="doSomething(event)"`&gt;
    bla
  &lt;/button&gt;
  </code></pre>
  
  <p>This does not, trying to specify the keydown event using an index:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ng-container *ngFor="let elem of elems; index as index;"&gt;
  
    &lt;button
      (document:keydown[index])="doSomething(event)"`&gt;
      bla
    &lt;/button&gt;
  
  &lt;/ng-container&gt;
  </code></pre>
  
  <h2>Question</h2>
  
  <p>How to dynamically bind an event-listener in an Angular 8 template?</p>
  
  <p>I would prefer not to use a generic <code>@HostListener</code> event-listener as a generic method or use any other workaround.</p>
  
  <p>I also tried variations of the above syntax, trying specify the concrete number-key, but no joy.</p>