How to use ngIf to choose diffrent selector in html in an angular app

user_1938143 0
Viewed 46

I have a question about how to use ngIF in HTML code to choose different selector.

I show my code as follow:

in HTML Code:

<a class="style" (click)=clickFunction() (keyup.Enter)=ke()>
  <div>
    content

  </div>
</a>

this is html is in a shared component,

I want to use this shared component into the other component with input parameter noClickAndKeyEnter=true |false

so in this case I should change html code as follow:

<a class="stype" (click)="noClickAndKeyEnter ? clickFunction(): ''" (keyup.Enter)="noClickAndKeyEnter ? ke() :''">
  <div>
    content

  </div>
</a>

My question is, is there also the easy way to resolve my question, that I do not write all place with noClickAndKeyEnter ? :

any solutions?

angular-ng-if angular html
3 Answers

You can use the callback pattern!

ts

conditionallyExecute(callback: Function, ...params) {
    if(this.noClickAndKeyEnter) {
        callback(params)
    }
}

html

<a class="stype" (click)="conditionallyExecute(clickFunction, 1, 2)" (keyup.Enter)="conditionallyExecute(ke)">
  <div>
    content

  </div>
</a>
user_59245620

There are multiple ways you can do this. The simplest could be:

 clickFunction(){
    if(this.noClickAndKeyEnter){
      // execute code here
    } else {
      // just return or whatever you want here
    }
 }
user_55366950

Just a simple guard in your functions

clickFunction() {
    if (!this.noClickAndKeyEnter) return;
    ...
}

ke() {
    if (!this.noClickAndKeyEnter) return;
    ...
}

But by the name of noClickAndKeyEnter I think you might have the true / false values backwards.

user_129148330
Related