What is the use of $ in an expression that executes a pipe in a property in Angular?

Question

In the tutorial written by Jen Looper for Nativescript website it demonstrates a code that before the pipe is preceded by the symbol $ as below:

<ScrollView>
    <StackLayout>
        <FlexboxLayout class="container" *ngFor="let yowl of (yowls$ | async)">                 
        </FlexboxLayout>
    </StackLayout>
</ScrollView>

What is the function and effect of this $?

Answer 1

Dollar at the end of property names has become a convention of uncoded, or weakly typed languages to facilitate identifying properties that are of types that contain what it actually represents, for example a Observable or a Promise. ps. I ended up finding the answer in Stackoverflow in English, I searched for "dollar" in place of the symbol and got a more detailed return, (difficulty cited in this link)

.

So the property will be a Promise or Observable that provide a value as its final result.

See the example, obtained from the Angular manual:

import { Component } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-stopwatch',
  templateUrl: './stopwatch.component.html'
})
export class StopwatchComponent {

  stopwatchValue: number;
  stopwatchValue$: Observable<number>;

  start() {
    this.stopwatchValue$.subscribe(num =>
      this.stopwatchValue = num
    );
  }
}

Note that both variables have the same initial name, which is Observable is fixed with Dollar to indicate such a feature. And the final variable that represents the same value, but outside the Observable has no Dollar.

In typed languages like Typescript the use of such a symbol is like naming a property using its type, like nomeString, turns out to be disposable information.

The use of Dollar does not interfere in the functioning in anything, being valuable only then in languages not typed, but a good practice.

Such practice has historically been adopted in the Framework cyrcles.js