Angular2 leadership style - dollar sign property?

Question

Looking at the angular2 code example , we see some public properties with the $ 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 for this notation? always use this for public properties)?
• public properties are used, but not methods (e.g. missionAnnouncements (), missionConfirmations ()) - is this an agreement again for ng2 applications?

Does this manual seem to have nothing in this manual ?

Answer 1

$ suffix (popularized by Cycle.js) is used to indicate that a variable is Observable . This can be done in the official style guide, but it does not exist yet

Read more here: What does the $ dollar suffix sign mean?

Answer 2

I did not see this $ in the style guide, but I saw that it is often used for public properties that reference observables that you can subscribe to.

Answer 3

The $ name paradigm arose from 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 flows with a Unicode character that matches the last letter of the word. This fixes the problem with words that are not plural with "s".

 mouse$ vs mic€ 

None of these naming conventions are contained in the official Angular style guide. The use of one or the other (or none) is entirely dependent on personal preferences.

Answer 4

I saw that the variables end in $ when reading the hero's official textbook:

 <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 carefully and you will see that * ngFor iterates over the list of heroes$ , not heroes .

 <li *ngFor="let hero of heroes$ | async" > 

$ is a convention that indicates that $ characters are observable, not an array.

In most cases, we do not subscribe to these observable variables in the component. We usually use AsyncPipe to automatically subscribe to Observable variables.

I did not find it in the Style Guide since Angular5.1 released yesterday (December 6, 2017).