54 lines
1.6 KiB
HTML
54 lines
1.6 KiB
HTML
<h1 id="event-binding">Event Binding</h1>
|
|
|
|
<div class="group">
|
|
<h3>Target event</h3>
|
|
<!-- #docregion event-binding-1 -->
|
|
<button (click)="onSave($event)">Save</button>
|
|
<!-- #enddocregion event-binding-1 -->
|
|
|
|
<!-- #docregion event-binding-2 -->
|
|
<button on-click="onSave($event)">on-click Save</button>
|
|
<!-- #enddocregion event-binding-2 -->
|
|
|
|
<!-- #docregion custom-directive -->
|
|
<h4>myClick is an event on the custom ClickDirective:</h4>
|
|
<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=$event.target.value" >
|
|
without NgModel
|
|
<!-- #enddocregion event-binding-3-->
|
|
</div>
|
|
|
|
<div class="group">
|
|
<h3>Binding to a nested component</h3>
|
|
<h4>Custom events with EventEmitter</h4>
|
|
<!-- #docregion event-binding-to-component -->
|
|
<app-item-detail (deleteRequest)="deleteItem($event)" [item]="currentItem"></app-item-detail>
|
|
<!-- #enddocregion event-binding-to-component -->
|
|
|
|
|
|
<h4>Click to see event target class:</h4>
|
|
<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 (click)="onSave($event)">Save, no propagation</button>
|
|
</div>
|
|
|
|
<h3>Saves twice:</h3>
|
|
<div (click)="onSave()" clickable>
|
|
<button (click)="onSave()">Save with propagation</button>
|
|
</div>
|