2

I'm currently working on an Angular project that creates a bunch of dynamic components and I want each one to have a different color based upon the results of a call to a service that it makes on initialization. The code for the component is as follows:

@Component({
  selector: 'app-step',
  templateUrl: './step.component.html',
  styleUrls: ['./step.component.css'],
  providers: [DisplayService, MessageService]
})
export class StepComponent implements OnInit {

//a bunch of other functions and a constructor

findSolutions(defect: Defect): void {
    //this is where I make the call to the service
    this.defectService.getSolutions(defect, this.displayService).subscribe(solutions => {
      if(solutions[0] === undefined) {
          //HERE I want to change the back-ground color of .boxed (element 
          //in the style file) to yellow
        }
        else if(solutions !== undefined) {
          //HERE I want to change the back-ground color of .boxed to green
        }
    });
  }

ngOnInit(): void {
    this.findSolutions(this.defect);
  }
}

Can someone help me figure out how to use HostBinding?

JCrew0
  • 89
  • 1
  • 13
  • 1
    Why don't you use NgClass to add or remove a class dependant on a component property bool or value? – Darren Street Jul 07 '21 at 17:27
  • @DarrenStreet Oh yah, that works. If you want to submit it as an answer, I'll give it the check so you can get the reputation for it lol – JCrew0 Jul 07 '21 at 18:19

1 Answers1

0

Why don't you use NgClass to add or remove a class dependant on a component property bool or value?

Darren Street
  • 1,652
  • 17
  • 21