CODEWITHSUNDEEP
angularangular7
afeef
afeef

Reputation: 4696

what does $ mean in Angular 7

I have some confusion in variable declaration.

what does $ mean in heroes$

Angular 4

export class HeroSearchComponent implements OnInit {
heroes: Observable<Hero[]>;
private searchTerms = new Subject<string>();

constructor(
 private heroSearchService: HeroSearchService,
 private router: Router) {}

Angular 7+

 export class HeroSearchComponent implements OnInit {
 heroes$: Observable<Hero[]>;
 private searchTerms = new Subject<string>();
 constructor(private heroService: HeroService) {}

     // Push a search term into the observable stream.
          search(term: string): void {
          console.log(term);
            this.searchTerms.next(term);
        }

Upvotes: 8

Views: 7613

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39432

It's a convention followed for Observables. Here's what the Angular Docs have to say about it:

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

There's no harm in not following it as such. But since it is a recommendation, it's good to follow.

UPDATE

Conventions evolve over time depending on the past experience of developers. This particular convention was committed on the 10th of Jan, 2018

So yeah, this convention was added to the Docs after Angular 5 and there are high chances that you weren't using it while working in Angular 4.

Also, the syntax for Rxjs has also changed significantly after the upgrade to Rxjs 5.5 in Angular 5(not sure about the exact version). So you might want to check how the syntax of Rxjs has changed over time. There's a nifty tool to help you with that. Check out RxJS Explorer 2.0: Learn. Compare. Update.

Upvotes: 13

Related Questions