Looking at angular2 code example, we see some public properties with $ sign:
<....>
private missionAnnouncedSource = new Subject<string>();
private missionConfirmedSource = new Subject<string>();
// Observable string streams
missionAnnounced$ = this.missionAnnouncedSource.asObservable();
missionConfirmed$ = this.missionConfirmedSource.asObservable();
<....>
Can anyone explain:
- why $ is used (what is the reason behind this notation? always use this for public properties) ?
- public properties are used but not methods (e.g. missionAnnouncements(), missionConfirmations()) - again, is this a convention for ng2 apps?
Does not seem there is anything regarding this in the official style guide ?
$ suffix (popularized by Cycle.js) is used to indicate that the variable is an Observable.
It could make it to the official style guide too but it's not there yet
Read more here : What does the suffixed dollar sign $ mean?
Update:
Read more about the trailing “$” sign on Angular website here:
https://angular.io/guide/rx-library#naming-conventions-for-observables
The $ naming paradigm originated with Andre Saltz and suggests pluralizing all variable names that contain observables or streams.
getAll(): Observable<Zone[]>{
let zone$ = this.http
.get(`${this.baseUrl}/zones`, {headers: this.getHeaders()})
.map(mapZone);
return zone$;
}
Another approach is to pluralize variable names that contain observables or streams with a unicode character that matches the last letter of the word. This addresses the issue with words that aren't pluralized with an "s".
mouse$ vs mic€
Neither of these naming conventions are in the official Angular style guide. Usage of one or the other (or none) is entirely dependent on personal preference.
I haven't seen this $ in the style guide but I saw it being used frequently for public properties that refer to observables that can be subscribed to.
Update:
https://angular.io/guide/rx-library#naming-conventions-for-observables
Because Angular applications are mostly written in TypeScript, you will typically know when a variable is an observable. Although the Angular framework does not enforce a naming convention for observables, you will often see observables named with a trailing “$” sign.
This can be useful when scanning through code and looking for observable values. Also, if you want a property to store the most recent value from an observable, it can be convenient to simply use the same name with or without the “$”.
Original:
I saw variables end with $ when reading the official hero tutorial:
<div id="search-component">
<h4>Hero Search</h4>
<input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
<ul class="search-result">
<li *ngFor="let hero of heroes$ | async" >
<a routerLink="/detail/{{hero.id}}">
{{hero.name}}
</a>
</li>
</ul>
</div>
Look closely and you'll see that the *ngFor iterates over a list called heroes$, not heroes.
<li *ngFor="let hero of heroes$ | async" >
The $ is a convention that indicates heroes$ is an Observable, not an array.
Most cases are that we do not subscribe to those Observable variables in component. We usually use AsyncPipe to subscribe to the Observable variables automatically
I haven't found it in Style Guide since Angular5.1 has released yesterday(December 6th, 2017).
