Customized Attribute Directives

Sometimes the public name of an input/output property should be different from the internal name.

The directive name is often a poor choice for 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, you can have a public name for the property that meets conventional expectations, while using a different name internally. In the example immediately above, you are actually binding through the myClick alias to the directive's own clicks property.

You can specify the alias for the property name by passing it into the input/output decorator like this:

src/app/click.directive.ts

@Output('myClick') clicks = new EventEmitter<string>(); //  @Output(alias) propertyName = ...

You can also alias property names in the inputs and outputs arrays. You write a colon-delimited (:) string with the directive property name on the left and the public alias on the right:

src/app/click.directive.ts

@Directive({
  outputs: ['clicks:myClick']  // propertyName:alias
})

src/app/app.component.html

<div (myClick)="clickMessage=$event" clickable>click with myClick</div>