How do I use document.querySelector to change css class using ngFor?

Issue

So I have been stuck here for some time and no matter how much research I do, I cannot find a solid answer. I may be approaching this the wrong way so feel free to tell me if I am.

I am making a web app that will display projects, like a project board. On the dashboard I am displaying the project and tasks for each project. The tasks are shown in a clickable material chip that (when finished) will, when clicked, allow you to change the task status. I would like for these chips to change color based on the severity of the status on the task, which it is pulling from a Mongo Database using jsonDecode. I also am using a Dart server to send commands to the database and receive data.

I have tried setting up a function that contains an if statement to check the task status. Then if it is found, it is supposed to change the color of the css class in the html, else, it moves on to the next status in the function. I also tried to seet all of this in the html but ngFor makes this difficult without making 5 ngIf sections, one for each task status.

dashboard_component.dart

Future<void> ngOnInit() async {
    await getProjects();
    await getTasks();
    doTStat();
  }


  setTStatus(taskList) {
      if (taskList.tStatus == 'Critical') {
          document.querySelector('.taskStat')
          ..style.backgroundColor = "purple"
          ..style.color = "black";
      } else if (taskList.tStatus =='On Hold') {
          document.querySelector('.taskStat')
          ..style.backgroundColor = "red"
          ..style.color = "black";
      } else if (taskList.tStatus == 'In Progress'){
          document.querySelector('.taskStat')
          ..style.backgroundColor = "yellow"
          ..style.color = "black";
      } else if (taskList.tStatus == 'New') {
          document.querySelector('.taskStat')
          ..style.backgroundColor = "rgb(136, 225, 236)"
          ..style.color = "black";
      } else if (taskList.tStatus == 'Complete') {
          document.querySelector('.taskStat')
          ..style.backgroundColor = "lime"
          ..style.color = "black";
      } else if (taskList.tStatus == 'Canceled') {
          document.querySelector('.taskStat')
          ..style.backgroundColor = "black"
          ..style.color = "white";
    }
  }

  doTStat() {
    taskList.forEach((taskList) => setTStatus(taskList)); 
  }

  void taskDataHandle(String jsonString) {
    taskList = (jsonDecode(jsonString) as List).map((e) => new
    Tasks.fromJson(e)).toList();
  }

dashboard_component.html

<material-chips class="clickable chips" *ngFor="let t of taskList">
                <material-chip
                *ngIf="t.joinID == p.id"
                [removable]="false"
                popupSource
                #source="popupSource"
                buttonDecorator
                (trigger)="showPopup(source)"
                materialTooltip="{{t.genNotes}}"
                class="taskStat"
                (click)="onTaskSelect(t)"
                [class.selected]="p  === taskSelected">
                <div>{{t.tName}}</div>
                <div style="font-size: 10px">{{t.sTech}}</div>
                <material-popup [source]="popSource" 
                                [(visible)]="showingPopup" 
                                [enforceSpaceConstraints]="false" 
                                [preferredPositions]="[position]">
                    <div header style="background: lightblue; color: black; font-weight: bold; line-height: 1.8; text-align: center">
                        Select Project Status
                    </div>
                  <material-select width="2" class="bordered-list">
                      <material-select-item *ngFor="let s of statusDropdowns"
                                            (trigger)="proto = s"
                                            [selected]="proto == s">{{s}}</material-select-item>
                    </material-select>
                    </material-popup>
              </material-chip>

I would like for the chip colors to be changed based on the task status that they display. Is there a better way to do this?

Solution

You shouldn’t use and not need document.querySelector at all with Angular.

Why don’t use use instead

 ...
 class="taskStat" 
 [ngClass]="{'taskStat-Critical': t.tStatus == 'Critical', 'taskStat-OnHold': t.tStatus == 'On Hold', 'taskStat-InProgress': t.tStatus == 'In Progress', 'taskStat-New': t.tStatus == 'New', 'taskStat-Complete': t.tStatus == 'Complete', 'taskStat-Canceled': t.tStatus == 'Canceled'}"
 (click)="onTaskSelect(t)"

and then use CSS to assign a color depending on the applied CSS class taskStat-Critical, taskStat-OnHold, …?

Answered By – Günter Zöchbauer

Answer Checked By – Jay B. (FlutterFixes Admin)