Disable (click) function based on condition

Question

here the enableAddLink function looks like this in the typescript

enableAddLink() {
    this.storyboard.network.addNodeMode = false;
    this.addNodeMode = false;
    this.addLinkMode = !this.addLinkMode;
    this.storyboard.network.addLinkMode = this.addLinkMode;
  }

The links should get created only when nodes exist else I want it to be disabled.

Answer 1

Update: The original answer still works. But a better way is to use the logical AND (&&) operator as shown in @RedStoneMatt's answer.

---

Original Post

It isn't clear what you mean by nodes. But if you want to disable an event handler binding based on a single variable, you could do so by using the ternary operator. Try the following

Controller

export class AppComponent {
  nodes: boolean = true;

  onClick(event) {
    console.log('button clicked');
  }
}

Template

<button (click)="nodes ? onClick(event) : ''">Click me</button>

Answer 2

Rather than using the ternary operator (as in Barremian's answer), you can use the logical AND operator:

<button (click)="nodes && enableAddLink()">Add links</button>

enableAddLink() will be evaluated only if nodes is truthy. This looks cleaner, as it avoids having a : '' laying around.