Entrance and exits, how to work with them to follow the Angular 2 styleguide naming convention?

Question

Before I found out, it is better for my directive to be defined as follows:

... inputs: [ 'onOutside' ] ... export class ClickOutsideDirective { @Output() onOutside: EventEmitter<any> = new EventEmitter(); } 

But then I read the stegid, and he said that you should not prefix outputs with on , since Angular 2 supports on- syntax in templates.

So, I'm trying to change it to something like:

 @Input() outsideClick: any; @Output() outsideClick: EventEmitter<any> = new EventEmitter(); 

However, it is difficult for me to separate the @Input name from the Output name if you are not allowed to use the on prefix.

Before you could call the @Input and @Output same, but if you declare both in the exported class, then this no longer works, as an error will be raised.

If I call @Input to outside and @Output to outsideClick , that doesn't make sense, since both of them are the same thing. outside is the function I want to execute when calling outsideClick .

Also, outsideClick doesn't know what to do if outside no longer calls the same thing, or am I missing something?

How can I approach @Input and @Output variable names here so that they still work and have the same meaning as in the first example?

EDIT:

Usage example:

 <div clickOutside [exceptions]="['.toggler']" (outside)="doSomethingOnOutsideClick()"></div> 

Answer 1

Definitely do not use on . JavaScript events also don't start with on . Only event handlers do. There is no onClick event in onClick . The name of the click event, and if you assign the onClick function, this function will be called when the click event is received.

If you have inputs and outputs that together call them

 @Input() name:any; @Output() nameChange: EventEmitter<any> = new EventEmitter();; 

This allows a short hand for Angular2 "two-way binding"

 [(name)]="someProp" 

If you use @Input() and @Output() (the preferred path), you do not need inputs: [] and outputs: [] . These are two ways to do the same thing, and if you use both, this is redundant.

To fit the browser naming scheme, you can do

 (nameChange)="onNameChange($event)" 

so that the onNameChange event onNameChange called when the nameChange event is nameChange .

If the event is not part of an I / O pair, you can or should omit Change

 (loggedIn)="onLoggedIn($event)