In certain cases @Input and @Output properties can be named differently than the actual inputs and outputs.

<div 
  pagination 
  paginationShowFirst="true"
  (paginationPageChanged)="onPageChanged($event)">
</div>

@Directive({ selector: '[pagination]'})
class PaginationComponent {
  @Input('paginationShowFirst') 
  showFirst: boolean = true;

  @Output('paginationPageChanged') 
  pageChanged = new EventEmitter();
}

Note: Use this wisely, see StyleGuide recommedation

Links

• https://angular.io/guide/styleguide#style-05-13