input-button-unitcomponent should look like this:
changeTitle. It will receive the new title as its argument. The best practice is to have our custom methods written after the lifecycle methods (
ngOnInitin this case):
click. (We also change the binding of the input's value back to
The event is called
onClick- in Angular you remove the
onprefix from the events in the elements.
Button Clicked!But we want to pass the value that the user typed in the input box!
Savebutton. But now we'll bind a method to an event on the input element: when the user clicks Enter, the method
changeTitlewill be called.
keyup. We will catch the
keyupevent (when the pressed key is released) and change the title:
keyupevent occurs. Angular allows us to get the event object itself. It is passed to the event binding as
$event- so we can use it when we call
keyupevents has a reference to the element that emitted the event - the input element. The reference is kept in the event's property
target. As we've seen before, the input element has a property
valuewhich holds the current string that's in the input box. We can pass
$event.target.valueto the method:
keyupevent has properties which are more specific events. So just add the name of the key you'd like to listen to -
$eventobject in the console. This way you can explore it and see what properties it has.