Angular - "function()" vs (function)-CodePudding

I'm following some tutorial for Angular and I was wondering what the difference is between (click)=(onDelete) and (click)="onDelete()"

Code example:

<div >
  <h3>
    {{ task.text }}
    <fa-icon (click)="onDelete()" [ngStyle]="{ color: 'red' }" [icon]="faTimes"></fa-icon>
  </h3>
  <p>Day: {{ task.day }}</p>
</div>

It seems to do exactly the same but I was curious if there was happening something else internally.

Been searching for this question, but didn't get to find a similar question

CodePudding user response：

(click) = "onDelete()" is used to call a method called onDelete() when it is clicked. This syntax would be useful if you want to execute some code when the element is clicked.

(click) = (onDelete) is used to bind a property to the event "click" so that when the element is clicked, the value of the property will be passed as an argument to the expression on the right side of the equals sign. This is useful when you need to pass data to another component of fn (function) when the element is clicked.

Hope the above makes sense to you. You can check the angular documentation for events and event binding. https://angular.io/guide/event-binding

CodePudding user response：

It's event binding

(click) -> it's the event that you want to trigger your function.

"onDelete()" -> in here onDelete() is the method that calls when click event.

(click)="onDelete()" means, when you click fa-icon it will trigger that onDelete() method

for more details, check https://angular.io/guide/event-binding