<h1 id="event-binding">Event Binding</h1>

<div class="group">
  <h3>Target event</h3>
  <button type="button" (click)="onSave($event)">Save</button>

  <button type="button" on-enter="onSave()">on-click Save</button>

  <!-- #docregion custom-directive -->
  <h4>myClick is an event on the custom ClickDirective:</h4>
  <button type="button" (myClick)="clickMessage=$event" clickable>click with myClick</button>
  {{clickMessage}}
  <!-- #enddocregion custom-directive -->

</div>

<div class="group">
  <h3>$event and event handling statements</h3>
  <h4>Result: {{currentItem.name}}</h4>

  <!-- #docregion event-binding-3-->
  <input [value]="currentItem.name"
         (input)="currentItem.name=getValue($event)">
  <!-- #enddocregion event-binding-3-->
  without NgModel
</div>

<div class="group">
  <h3>Binding to a nested component</h3>
  <h4>Custom events with EventEmitter</h4>
  <app-item-detail (deleteRequest)="deleteItem($event)" [item]="currentItem"></app-item-detail>

  <h4>Click to see event target class:</h4>

<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->

<div class="parent-div" (click)="onClickMe($event)" clickable>Click me (parent)
  <div class="child-div">Click me too! (child) </div>
</div>

<h3>Saves only once:</h3>
<div (click)="onSave()" clickable>
  <button type="button" (click)="onSave($event)">Save, no propagation</button>
</div>

<h3>Saves twice:</h3>
<div (click)="onSave()" clickable>
  <button type="button" (click)="onSave()">Save with propagation</button>
</div>

<!-- eslint-enable @angular-eslint/template/click-events-have-key-events -->
