I have a function which returns a string, a css class and a boolean like this [false, green_box]. I want to utilise this values in below HTML but unfortunately I am unable to do so. How can I access the values? Since the function is called multiple times inside the HTML file I cannot assign the return values in a variable in typescript file.

Please note that I can use different function to return boolean value but the goal is to find a way to utilize multiple values returned from a function in HTML.

Below is my HTML

<div *ngIf="getClass('investing', 'plan')[0]"
     class="prio_box dnd_move"
     data-drag="list-1"
     data-drag-index="0">

  <span [ngClass]="getClass('investing', 'plan')[1]" 
      class="dnd_move clr-box">
  </span>

  <span class="drag_content dnd_move">Plan</span>

</div>

Here is my function,

getClass(component: string, value: any) {
    component = component.toLowerCase();
    value = value.replace(/\s/g, "");
    let pathValue = this.control[component]
      ? this.control[component.toLowerCase()][value]
      : null;
    this.allGreen.add(pathValue);
    return [pathValue == Status.Yes
      ? "green_box"
      : pathValue == Status.DontKnow
      ? "yellow_box"
      : "red_box",
      pathValue == Status.Yes
      ? false
      : pathValue == Status.DontKnow
      ? true
      : true];

  }