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
– Ore, Commented Jan 29, 2018 at 14:11

Iancovici · Accepted Answer · 2018-01-29 14:19:47Z

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, 2018 at 14:19

answered Jan 29, 2018 at 14:14

Iancovici

5,7317 gold badges41 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rosa Mystica Over a year ago

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

YulePale Over a year ago

Saved me so much time!

Collectives™ on Stack Overflow

add and remove class in typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related