title: Remove or add class in Angular
body: <p>I have a list and the plugin (<code>dragula</code>) I used, adds certain CSS class on certain action. I am using Angular 5. I want to find out the presence of certain class (<code>myClass</code>) and remove that and replace with (<code>yourClass</code>). In jQuery we can do that like this</p>
  
  <pre class="lang-js prettyprint-override"><code>$( "p" ).removeClass( "myClass" ).addClass( "yourClass" );
  </code></pre>
  
  <p>How can I achieve this in Angular5. Here the main issue is that <code>myClass</code> is added automatically to the selected <code>li</code> by the plugin. So using a function I cant set the class.</p>
  
  <p>When I tried with renderer2, it is removing the CSS class and adding another class. But it is adding only to the first <code>li</code>. My code is:</p>
  
  <pre class="lang-js prettyprint-override"><code>let myTag ; 
  myTag = this.el.nativeElement.querySelector("li");
  this.renderer.addClass(myTag, 'gu-mirrorss')
  this.renderer.removeClass(myTag, 'dragbox');
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div  class="right-height" id ='dest' [dragula]='"second-bag"' [dragulaModel]="questions"&gt; 
         {{ questions.length == 0 ? ' Drag and drop questions here ' : ' '}}
         &lt;li #vc  data-toggle="tooltip" data-placement="bottom" title= {{question.questionSentence}} class="well dragbox"  *ngFor="let question of questions; let i = index" [attr.data-id]="question.questionId" [attr.data-index]="i" (click)="addThisQuestionToArray(question,i, $event)" [class.active]="isQuestionSelected(question)"  #myId &gt; {{question.questionId}} {{question.questionSentence}}&lt;/li&gt;
  &lt;/div&gt;
  </code></pre>