title: Angular after click add active class and remove from siblings
body: <p>Using component for list how to add active class and remove it from siblings.</p>
  <p>In main component HTML:</p>
  <pre><code>&lt;app-item-desc *ngFor=&quot;let itemDesc of addedItem; let i = index&quot; [itemlistDesc]=&quot;itemDesc&quot;&gt;&lt;/app-item-desc&gt;
  </code></pre>
  <p>List's component</p>
  <pre><code>&lt;div class=&quot;order&quot; (click)=&quot;select($event)&quot;&gt;
      &lt;div class=&quot;order__left&quot;&gt;
          &lt;h4 class=&quot;order__title&quot;&gt;{{itemlistDesc.name}}&lt;/h4&gt;
          &lt;p&gt;&lt;span class=&quot;order__unit&quot;&gt;{{itemlistDesc.unit}}&lt;/span&gt; Units at ${{itemlistDesc.price}}/Units&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;order__right&quot;&gt;
          &lt;div class=&quot;order__total&quot;&gt;
              {{(itemlistDesc.price * itemlistDesc.unit)}}$
          &lt;/div&gt;
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  <p>Is there a possible way to use directive? (Angular 2+)</p>