Search code examples
angularevent-binding

Angular - "function()" vs (function)

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

Code example:

<div class="task">
  <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

Solution

  • (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