title: Add a class on item selection and remove it to add on another element selection
body: <p>I have a table that shows me a list of item.
  I want to be able to add a class on the selected item and remove it when I select another one.</p>
  <p>Here's my template:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-10 pl-3&quot;&gt;
      &lt;h1&gt;My Shopping List&lt;/h1&gt;
      &lt;h3 class=&quot;mb-0&quot;&gt;Add all the ingredients you need&lt;/h3&gt;
      &lt;app-shopping-edit&gt;&lt;/app-shopping-edit&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;th&gt;Ingredient&lt;/th&gt;
          &lt;th&gt;Amount&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr
          *ngFor=&quot;let ingredient of ingredients; let i = index&quot;
          (click)=&quot;onEditItem(i)&quot;
        &gt;
          &lt;td&gt;{{ ingredient.name }}&lt;/td&gt;
          &lt;td&gt;{{ ingredient.amount }}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here's my ts code:</p>
  <pre><code> onEditItem(index: number) {
      this.shoppingListService.startedEditing.next(index);
      this.addStyleOfSelection(event);
    }
  
    addStyleOfSelection(event: any) {
      let selection = event.target;
      let trSelected = selection.parentNode;
      trSelected.classList.toggle('selected');
    }
  </code></pre>
  <p>Also &quot;event&quot; is deprecated, but I can't figure out what to use instead.</p>