title: Angular 6 How to add and remove class using Angular Renderer2
body: <p>I am trying to use angular Renderer2 to add and remove a class in HTML template. 
  Here I am facing the difficulties:</p>
  
  <ol>
  <li>to add the class once component will load</li>
  <li>Only the selected item should have the class</li>
  </ol>
  
  <p>I have created a demo in stackblitz. Please <a href="https://stackblitz.com/edit/angular-renderer2-core?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">click here</a> to see code.</p>
  
  <p>Thank you.</p>
  
  <pre><code>&lt;div class="tabs"&gt;
  &lt;a href="#" (click)="selectTab($event)"&gt;Tab 1 &lt;/a&gt;
  &lt;a href="#" (click)="selectTab($event)"&gt;Tab 2 &lt;/a&gt;
  &lt;a href="#" (click)="selectTab($event)"&gt;Tab 3&lt;/a&gt;
  &lt;/div&gt;
  
  
  constructor(private render:Renderer2){}
  selectTab(event:any) {
  this.render.addClass(event.target,"test");
  }
  </code></pre>