title: Changing a css style of the active element in angular
body: <p>I am new to angular and am looking for a technique to rotate a piece when the user is dragging it by pressing the 'r' key. My initial idea is to swap the <em>flex-direction: column</em> to <em>flex-direction: row</em> of the "item" css class</p>
  
  <pre><code>.item {
    display: flex;
    flex-direction: column; /* alternate between row &amp; column*/  
     margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
  }
  </code></pre>
  
  <p>My questions is, is this possible? 
  My other idea is to have to classes item-column and item-row and swap them but even doing that I don't know how to access the element in the <code>item.component.ts</code>.
  I know that with the .item:active selector I can reach the element, but don't know how to do it from the controller.
  Here is the code I have so far: <a href="https://stackblitz.com/edit/angular-cdk-drag-and-keypress" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-cdk-drag-and-keypress</a></p>