add and remove class in typescript

Question

I am developing an angular5 application. I have an array containg list of question and I displayed it by iterating using ngFor.User can select questions of his choice by pressing ctrl key. After selecting a question by pressing ctrl key that will shown as selected (I implemented that by adding that question to an array and check at the time of iteration that perticular question is in selectedQuestions array.If that is present in that array I addedan 'active' class to display it as selected).Now I want to remove this class at the time when the user dragged the mouse to drag and drop questions to reorder it(I am using ng2-dragula for drag and drop). I have tried this following code

 import {Component, OnInit, ViewChild} from '@angular/core';
 export class SummaryComponent implements OnInit {
 @ViewChild("myLabel") lab;

 addThisQuestionToArray(person: any, i: number, event) {
  if (!event.ctrlKey) {
   this.selectedQuestions = [];
  }
  this.toggleItemInArr(this.selectedQuestions, person);
 }
  toggleItemInArr(arr, item) {
  const index = arr.indexOf(item);
  index === - 1 ? arr.push(item) : arr.splice(index, 1);
 }

 isQuestionSelected(question: any) {
   return (this.selectedQuestions.indexOf(question) !== -1);
 }
 constructor(private dragula: DragulaService){
 }
 ngOnInit() {
 this.dragula
  .drag
  .subscribe(value => { 
      this.dragging =true;  
      console.log("dragging");       
      this.lab.nativeElement.classList.remove("active");
  });
 }
}

HTML code summarycomponent.html is

  <li class="well dragbox"  *ngFor="let question of questions; let i = index" [attr.data-id]="question.QuestionId"  question.firstName= "i" [attr.data-index]="i" (click)="addThisQuestionToArray(question,i, $event)" [class.active]="isQuestionSelected(question)"  #myLabel > {{i}} {{question.QuestionId}} {{question.Question}}</li>

Your question is hard to understand. Could you please describe what you want to achieve, what doesn't work and maybe even add some screenshots/more code? — Ore, Jan 29 '18 at 14:11

Iancovici · Answer 1 · 2018-01-29T14:19:47.780

1

You can control element's class with ngClass, and create a conditional statement, so if you create a variable locally like dragging, and have a class you want to conditionally apply like active

<li class="well" [ngClass]="{'active': dragging}">

alternatively

<li class="well" [ngClass]=" dragging ? 'active': '' ">

edited Jan 29 '18 at 14:19

answered Jan 29 '18 at 14:14

Iancovici

5,574
7
39
57

currently I am using [class.active]="isQuestionSelected(question)" to know whether the passed question is selected or not to know it is active or not. By simply using a variable dragging how I can set the values of each item in the list is active or not – Rosa Mystica Jan 29 '18 at 14:55
Saved me so much time! – YulePale Feb 09 '19 at 04:47

add and remove class in typescript

1 Answers1