0

I want to add a span with different icons based on a flag, with the onclick event that call an inside function defined in component ts.

testfunc(){
 console.log("it works")
}

flagToIcon(flag: boolean) {
    switch (flag) {
      case true:
       return `<span 
        class="isp-font-2x isp-font-lock cursor-pointer cursor-pointer" ${(onclick)}=${this.testfunc()}></span>`;
        
      case false:
        return `<span "
        class="isp-font-2x isp-font-edit-pencil-n cursor-pointer" ${(onclick)}=${this.testfunc()}></span>`;
    }
  }

I'm able to differentiate the cases and the html is returned, however the span tag is rendered without the onclick function. What am I doing wrong?

Kuze
  • 41
  • 1
  • 6
  • 1
    "angular" and "angularjs" are not the same. Your tags are confusing. I suspect you mean just `angular`. – Marc Oct 22 '22 at 15:58
  • figure out why the flag is `false`. – Wen W Oct 22 '22 at 16:05
  • Sorry I don't understand, the Icons were rendered accordingly. It's the onclick that doesn't work. It don't exist at all. – Kuze Oct 22 '22 at 16:17

1 Answers1

1

Try with ngClass :

  [ngClass]="{
    isp-font-lock: flag,
    isp-font-edit-pencil-n: !flag
  }"

In HTML use (click) not onClick

Example:

<span (click)="flagToIcon()"><i [ngClass]="{
        isp-font-lock: flag,
        isp-font-edit-pencil-n: !flag
      }"></i></span>

I don't know your version but in Angular use (click) and ngClass can resolve your issue

Benjamin Sicard
  • 36
  • 2