Add html span binded with onclick function in Angular-CodePudding

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 
         ${(onclick)}=${this.testfunc()}></span>`;
        
      case false:
        return `<span "
         ${(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?

CodePudding user response：

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

CodePudding user response：

Angular sanitizes the string before rendering, in this case, the onclick is removed. This answer might help you create dynamic HTML elements