title: Angular: I want to move focus of div from to another on arrow key buttons
body: <p>I am working on angular project and came to a situation where i have series of div in a row and when user clicks on any div he should be able to move from one div to another using arrow key.</p>
  
  <p>Please help.</p>
  
  <p>I tried using keypress event but it didn't helped me. Tried finding out similar questions on stackoverflow but all answers where into jquery and i need it in in typescript.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>moveCell(e){
    console.log(e);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container{
  width: 100%;
  }
  
  .cell{
  width: 100px;
  float:left;
  }
  
  .cell:hover,
  .cell:focus{
  background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="cell" (keypress)="moveCell($event)"&gt;cell 1&lt;/div&gt;
    &lt;div class="cell" (keypress)="moveCell($event)"&gt;cell 2&lt;/div&gt;
    &lt;div class="cell" (keypress)="moveCell($event)"&gt;cell 3&lt;/div&gt;
    &lt;div class="cell" (keypress)="moveCell($event)"&gt;cell 4&lt;/div&gt;
    &lt;div class="cell" (keypress)="moveCell($event)"&gt;cell 5&lt;/div&gt;
    &lt;div class="cell" (keypress)="moveCell($event)"&gt;cell 6&lt;/div&gt;
    &lt;div class="cell" (keypress)="moveCell($event)"&gt;cell 7&lt;/div&gt;
    &lt;div class="cell" (keypress)="moveCell($event)"&gt;cell 8&lt;/div&gt;
    &lt;div class="cell" (keypress)="moveCell($event)"&gt;cell 9&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In my code If user clicks on cell 2, focus should automatically go to cell 2. After that If user use keyboard and press arrow keys it should move focus to next/prev cell.</p>