> For the complete documentation index, see [llms.txt](https://fancyloves.gitbook.io/frontendtech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fancyloves.gitbook.io/frontendtech/angularjs/fundamentals/directives/customized-attribute-directives.md).

# 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:

```javascript
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:

```javascript
src/app/click.directive.ts

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

```markup
src/app/app.component.html

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