docs(guide/Components): clarify output events with extra example and note

Add additional line from example which demonstrates using the snake cased attribute binding in
parent component template.
Add note clarifying camelCase to snake-case requirement to use the Output binding callback feature.

Closes #14365

Author: machineloop

docs/content/guide/component.ngdoc

@@ -133,6 +133,8 @@ components should follow a few simple conventions:
     For a deletion, that means the component doesn't delete the `hero` itself, but sends it back to
     the owner component via the correct event.
     ```html
+        <!-- not that we use snake case for bindings in the template as usual -->
+        <editable-field on-update="$ctrl.update('location', value)"></editable-field><br>
         <button ng-click="$ctrl.onDelete({hero: $ctrl.hero})">Delete</button>
     ```
   - That way, the parent component can decide what to do with the event (e.g. delete an item or update the properties)