` tag,
+ we expect to bind to an event property that is also called `myClick`.
+makeExample('template-syntax/ts/app/app.component.html', 'my-click')(format=".")
:marked
- while inside the directive, the property is known as `clicks`.
+ However, the directive name is often a poor choice for the the name of a property within the directive class.
+ The directive name rarely describes what the property does.
+ The `myClick` directive name is not a good name for a property that emits click messages.
+
+ Fortunately, we can have a public name for the property that meets conventional expectations
+ while using a different name internally.
+ In the example immediately above, we are actually binding *through the* `myClick` *alias* to
+ the directive's own `clicks` property.
+
+ We can specify the alias for the property name by passing it into the input/output decorator like this:
+
++makeExample('template-syntax/ts/app/my-click.directive.ts', 'my-click-output-1')(format=".")
+:marked
+
- With aliasing we please both the directive consumer and the directive author.
.l-sub-section
:marked
- We can alias property names in the `inputs` and `outputs` arrays as well.
- We write a colon-delimited string with
- the internal property name on the left and the public name on the right:
+ We can also alias property names in the `inputs` and `outputs` arrays.
+ We write a *colon-delimited* (:) string with
+ the directive property name on the *left* and the public alias on the *right*:
+makeExample('template-syntax/ts/app/my-click.directive.ts', 'my-click-output-2')(format=".")