execute 2 lines in (click) angular

How to execute 2 lines in (click) Angular?#

Introduction#

As an Angular developer, you may need to execute some lines of code on clicking an element. The Angular event binding (click) allows you to do so. In this article, we'll discuss how to execute 2 lines in the (click) event in Angular.

Method 1: Using Function Call#

The easiest way to execute 2 lines in the (click) event is by calling a function that contains those two lines of code.

// template
<button (click)="myFunction()">Click Me</button>

// component
myFunction() {
  console.log('Line 1');
  console.log('Line 2');
}

In the above example, we have used a button element with the (click) event binding. On clicking the button, the myFunction() function will be called, which will execute the two lines of code inside it.

Method 2: Using Inline Code#

If you don't want to create a separate function for two lines of code, you can also write them inline in the (click) event binding.

// template
<button (click)="console.log('Line 1'); console.log('Line 2')">Click Me</button>

The above example shows how to write two lines of code inline in the (click) event binding. Here, we have used the console.log() function to print both lines of code to the console.

Conclusion#

In conclusion, there are two ways to execute 2 lines in the (click) event in Angular. You can either call a function that contains those lines of code or write them inline in the (click) event binding. Both methods are simple and effective, and the choice depends on your preference and the complexity of your code.

hljs.initHighlightingOnLoad();