angular2 style guide - property with dollar sign?

$ 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.

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).