How can I adhere to Angular 2's naming convention for Input and Output as suggested by the styleguide?

Question

How can I adhere to Angular 2's naming convention for Input and Output as suggested by the styleguide?

Working with inputs and outputs while following Angular 2's styleguide naming convention

Initially, my directive was defined like this:

...
inputs: [
'onOutside'
]
... 

export class ClickOutsideDirective {
@Output() onOutside: EventEmitter<any> = new EventEmitter();
}

However, the styleguide recommends not using the prefix on for outputs, as Angular 2 supports the on- syntax in templates.

Attempting to adjust it to:

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

But struggling to differentiate between the @Input and Output names without the on prefix.

In the previous approach, naming both the @Input and @Output the same worked, but errors occur when declared within the exported class.

Renaming @Input to outside and @Output to outsideClick seems counterintuitive since they represent the same function. outside is the action triggered by outsideClick.

Furthermore, if outside and outsideClick are no longer named identically, outsideClick may not know which function to execute.

How can I effectively name the @Input and @Output variables so that functionality is maintained while making sense, similar to the original example?

EDIT:

Example of how to use:

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

javascript angular typescript angular2-styleguide

Answer 1

Answer №1

Avoid using the on prefix in JavaScript events; only event handlers should start with on. There is no onClick event in JS - instead, use the click event and assign a function to onClick for it to be called upon receiving the click event.

It's beneficial to name corresponding inputs and outputs when they are related.

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

This enables Angular2's "two-way binding" shorthand.

[(name)]="someProp"

If you utilize @Input() and @Output() (the preferred method), there is no need for both inputs: [] and outputs: [] as they serve the same purpose, rendering one redundant.

To conform to the browser naming convention, consider:

(nameChange)="onNameChange($event)"

This allows an event handler named onNameChange to be triggered upon receiving the nameChange event.

If the event is not tied to an input/output pair, it may be best to omit the Change part.

(loggedIn)="onLoggedIn($event)

Answer 2

Avoid using the on prefix in JavaScript events; only event handlers should start with on. There is no onClick event in JS - instead, use the click event and assign a function to onClick for it to be called upon receiving the click event.

It's beneficial to name corresponding inputs and outputs when they are related.

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

This enables Angular2's "two-way binding" shorthand.

[(name)]="someProp"

If you utilize @Input() and @Output() (the preferred method), there is no need for both inputs: [] and outputs: [] as they serve the same purpose, rendering one redundant.

To conform to the browser naming convention, consider:

(nameChange)="onNameChange($event)"

This allows an event handler named onNameChange to be triggered upon receiving the nameChange event.

If the event is not tied to an input/output pair, it may be best to omit the Change part.

(loggedIn)="onLoggedIn($event)

Answer 3

Answer №2

Indeed, the original poster posed multiple inquiries within a common framework, leading to distinct sections below.

Utilization and/or description

To enable support for Angular-2 and subsequent versions' "two-way binding", associate input with an output suffixed with Change, as shown:

@Input() password: string;
@Output() passwordChange: EventEmitter<string> = new EventEmitter();

This facilitates shorthand operation such as:

<app-my-component
    [(password)]="myPasswordProp"
    >
</app-my-component>

In the above example, I provide a default value to the component as input, while capturing user changes as output, essentially synchronizing myPasswordProp with MyComponent's internal state.

Nomenclature convention

In Angular-2 and later versions, reserve the "on" prefix exclusively for event handlers, not event emitters.

Note that using the "on" prefix for events is prohibited (and could result in compilation errors, particularly in newer Angular releases).

Even in JavaScript, there is no event named onClick; rather, it is referred to as click. The distinction lies in JS utilizing onClick as the attribute name where we assign event handlers, while Angular disallows this prefix.

Angular does permit the use of on for event handlers, like so:

(passwordChange)="onPasswordChange($event)"

Here, the onPasswordChange labeled event handler triggers upon activation of the passwordChange event.

However, if the event is not part of an input/output pair, skip the Change suffix when defining the output, opting instead for usage similar to:

(loggedIn)="onLoggedIn($event)"

Moreover, to adhere to browser-like naming conventions or differentiate events from other elements, our company adopted the "by" prefix, including examples like:

(byLogin)="onLogin($event)"

(bySave)="onSave($event)"

This method enhances readability, as it can be incorporated into human sentences, for instance:

"Our App's handler awaits action on login, spurred by login events originating from the library."

Conversely:

"The library's by login events trigger our App's handler, awaiting activity on login to transpire."

Readability serves as one rationale behind the utilization of both the "on" and "by" prefixes as implemented.

Class-based annotation vs Property-based annotation

Just as the initial post touched on this topic:

Employing @Input() and/or @Output() annotations with member variables stands as the preferred practice.
If you opt for the aforementioned approach, omit passing inputs: [] and/or outputs: [] to the class's annotation.
In essence, these two methods achieve analogous outcomes; employing one renders the other superfluous.

Answer 4

Indeed, the original poster posed multiple inquiries within a common framework, leading to distinct sections below.

Utilization and/or description

To enable support for Angular-2 and subsequent versions' "two-way binding", associate input with an output suffixed with Change, as shown:

@Input() password: string;
@Output() passwordChange: EventEmitter<string> = new EventEmitter();

This facilitates shorthand operation such as:

<app-my-component
    [(password)]="myPasswordProp"
    >
</app-my-component>

In the above example, I provide a default value to the component as input, while capturing user changes as output, essentially synchronizing myPasswordProp with MyComponent's internal state.

Nomenclature convention

In Angular-2 and later versions, reserve the "on" prefix exclusively for event handlers, not event emitters.

Note that using the "on" prefix for events is prohibited (and could result in compilation errors, particularly in newer Angular releases).

Even in JavaScript, there is no event named onClick; rather, it is referred to as click. The distinction lies in JS utilizing onClick as the attribute name where we assign event handlers, while Angular disallows this prefix.

Angular does permit the use of on for event handlers, like so:

(passwordChange)="onPasswordChange($event)"

Here, the onPasswordChange labeled event handler triggers upon activation of the passwordChange event.

However, if the event is not part of an input/output pair, skip the Change suffix when defining the output, opting instead for usage similar to:

(loggedIn)="onLoggedIn($event)"

Moreover, to adhere to browser-like naming conventions or differentiate events from other elements, our company adopted the "by" prefix, including examples like:

(byLogin)="onLogin($event)"

(bySave)="onSave($event)"

This method enhances readability, as it can be incorporated into human sentences, for instance:

"Our App's handler awaits action on login, spurred by login events originating from the library."

Conversely:

"The library's by login events trigger our App's handler, awaiting activity on login to transpire."

Readability serves as one rationale behind the utilization of both the "on" and "by" prefixes as implemented.

Class-based annotation vs Property-based annotation

Just as the initial post touched on this topic:

Employing @Input() and/or @Output() annotations with member variables stands as the preferred practice.
If you opt for the aforementioned approach, omit passing inputs: [] and/or outputs: [] to the class's annotation.
In essence, these two methods achieve analogous outcomes; employing one renders the other superfluous.

How can I adhere to Angular 2's naming convention for Input and Output as suggested by the styleguide?

Answer №1

Answer №2

Utilization and/or description

Nomenclature convention

Class-based annotation vs Property-based annotation

Similar questions

Is there a way to retrieve time data from a different server through AJAX?

Breeze js requests metadata without needing to make a second call to the server

Utilizing precise data types for return values in React hooks with Typescript based on argument types

Tips for broadcasting a router event

Adjust the color of a contenteditable div once the value matches

Encountered an issue with formControlName being undefined during the render process in Angular 2

The login form is experiencing issues with submission when utilizing the submitFormHandler in ReactJS

What is the reason onbeforeunload does not fire requests in Safari browser?

Is it possible for member variables to be reinitialized when clicking on a Component? Are there any alternative methods to prevent this from happening

Determine whether I am verified or if the XMLHttpRequest has been directed

Unable to retrieve nested objects from HTTP Response

Utilizing shared functions defined across different controllers

Tips for managing and authenticating communication between the backend and the frontend

Set a restriction on the Bootstrap DatePicker to only show dates within a

The current version of HTML5 Context Menus is now available

Always keep your phone in landscape orientation for optimal website viewing

Creating a line break in a Vue.js confirmation dialog is a helpful feature that can be achieved with a

Transform the Material UI grid orientation to horizontal row for content display

A straightforward method of transmitting data from JavaScript to the Python back-end within a Streamlit application

Error in Angular integrating with Stripe. No definition found for 'Stripe'. Perhaps you meant 'stripe'?