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 it possible to create a transparent colored foreground in HTML?

Class does not have the capability to deserialize an array

Determining Cost Using Quantity and Option Changes in Angular 4

implementing the reuse of form control names for multiple dropdowns in an Angular application

Separate each item in the list and display them across multiple pages within a table

Mastering the Art of Writing an Ajax Post Request

Creating unique ID tags using AngularJS

The issue with the jQuery click event arises when utilizing the "Module Pattern"

What are the steps to start a ExpressJS server for webpages that are not index.html?

Angular 2: Testing Firebase Add Functionality with Unit Tests

Is it advisable to optimize your SEO by placing the JavaScript code at the bottom of your webpage?

"Can you share a method to extract the value from a TextField component in a React hook-based Material-

Switch from using jQuery to vanilla JavaScript for handling POST requests

Adjust the HTML content prior to displaying it to prevent any flickering

Having issues with Angular chart.js onClick event? Learn how to retrieve all elements of a bar when it is clicked on

The issue with the left border color not functioning in JavaScript

How can I detect Mongoose events through syntax?

Embed a div element within a content-editable area

Utilizing the power of JavaScript within HTML to remove elements upon being clicked

Encountering an issue with eslint-loader in a new VueJS project: TypeError - eslint.CLIEngine is not recognized as