feat(component): remove $ prefix from LetViewContext property names (#3670)

BREAKING CHANGES:

The `$` prefix is removed from `LetViewContext` property names.

BEFORE:

```html
<ng-container *ngrxLet="obs$; $error as e; $complete as c">
  ...
</ng-container>
```

AFTER:

```html
<ng-container *ngrxLet="obs$; error as e; complete as c">
  ...
</ng-container>
```

Author: markostanimirovic

modules/component/spec/let/let.directive.spec.ts

@@ -33,12 +33,9 @@ import { stripSpaces } from '../helpers';
 
 @Component({
   template: `
-    <ng-container
-      *ngrxLet="value$ as value; $error as error; $complete as complete"
-      >{{
-        value === null ? 'null' : (value | json) || 'undefined'
-      }}</ng-container
-    >
+    <ng-container *ngrxLet="value$ as value">{{
+      value === null ? 'null' : (value | json) || 'undefined'
+    }}</ng-container>
   `,
 })
 class LetDirectiveTestComponent {
@@ -47,7 +44,7 @@ class LetDirectiveTestComponent {
 
 @Component({
   template: `
-    <ng-container *ngrxLet="value$; $error as error">{{
+    <ng-container *ngrxLet="value$; error as error">{{
       error === undefined ? 'undefined' : error
     }}</ng-container>
   `,
@@ -58,7 +55,7 @@ class LetDirectiveTestErrorComponent {
 
 @Component({
   template: `
-    <ng-container *ngrxLet="value$; $complete as complete">{{
+    <ng-container *ngrxLet="value$; complete as complete">{{
       complete
     }}</ng-container>
   `,
@@ -69,7 +66,7 @@ class LetDirectiveTestCompleteComponent {
 
 @Component({
   template: `
-    <ng-container *ngrxLet="value$ as value; $suspense as s">{{
+    <ng-container *ngrxLet="value$ as value; suspense as s">{{
       s ? 'suspense' : value
     }}</ng-container>
   `,

modules/component/src/let/let.directive.ts

@@ -24,17 +24,17 @@ export interface LetViewContext<PO> {
    */
   ngrxLet: LetViewContextValue<PO>;
   /**
-   * `*ngrxLet="obs$; let e = $error"` or `*ngrxLet="obs$; $error as e"`
+   * `*ngrxLet="obs$; let e = error"` or `*ngrxLet="obs$; error as e"`
    */
-  $error: any;
+  error: any;
   /**
-   * `*ngrxLet="obs$; let c = $complete"` or `*ngrxLet="obs$; $complete as c"`
+   * `*ngrxLet="obs$; let c = complete"` or `*ngrxLet="obs$; complete as c"`
    */
-  $complete: boolean;
+  complete: boolean;
   /**
-   * `*ngrxLet="obs$; let s = $suspense"` or `*ngrxLet="obs$; $suspense as s"`
+   * `*ngrxLet="obs$; let s = suspense"` or `*ngrxLet="obs$; suspense as s"`
    */
-  $suspense: boolean;
+  suspense: boolean;
 }
 
 /**
@@ -62,7 +62,7 @@ export interface LetViewContext<PO> {
  * ### Tracking Different Observable Events
  *
  * ```html
- * <ng-container *ngrxLet="number$ as n; let e = $error; let c = $complete">
+ * <ng-container *ngrxLet="number$ as n; error as e; complete as c">
  *   <app-number [number]="n" *ngIf="!e && !c">
  *   </app-number>
  *
@@ -117,53 +117,53 @@ export class LetDirective<PO> implements OnInit, OnDestroy {
   private readonly viewContext: LetViewContext<PO | undefined> = {
     $implicit: undefined,
     ngrxLet: undefined,
-    $error: undefined,
-    $complete: false,
-    $suspense: true,
+    error: undefined,
+    complete: false,
+    suspense: true,
   };
   private readonly renderEventManager = createRenderEventManager<PO>({
     suspense: () => {
       this.viewContext.$implicit = undefined;
       this.viewContext.ngrxLet = undefined;
-      this.viewContext.$error = undefined;
-      this.viewContext.$complete = false;
-      this.viewContext.$suspense = true;
+      this.viewContext.error = undefined;
+      this.viewContext.complete = false;
+      this.viewContext.suspense = true;
 
       this.renderSuspenseView();
     },
     next: (event) => {
       this.viewContext.$implicit = event.value;
       this.viewContext.ngrxLet = event.value;
-      this.viewContext.$suspense = false;
+      this.viewContext.suspense = false;
 
       if (event.reset) {
-        this.viewContext.$error = undefined;
-        this.viewContext.$complete = false;
+        this.viewContext.error = undefined;
+        this.viewContext.complete = false;
       }
 
       this.renderMainView(event.synchronous);
     },
     error: (event) => {
-      this.viewContext.$error = event.error;
-      this.viewContext.$suspense = false;
+      this.viewContext.error = event.error;
+      this.viewContext.suspense = false;
 
       if (event.reset) {
         this.viewContext.$implicit = undefined;
         this.viewContext.ngrxLet = undefined;
-        this.viewContext.$complete = false;
+        this.viewContext.complete = false;
       }
 
       this.renderMainView(event.synchronous);
       this.errorHandler.handleError(event.error);
     },
     complete: (event) => {
-      this.viewContext.$complete = true;
-      this.viewContext.$suspense = false;
+      this.viewContext.complete = true;
+      this.viewContext.suspense = false;
 
       if (event.reset) {
         this.viewContext.$implicit = undefined;
         this.viewContext.ngrxLet = undefined;
-        this.viewContext.$error = undefined;
+        this.viewContext.error = undefined;
       }
 
       this.renderMainView(event.synchronous);

projects/ngrx.io/content/guide/component/let.md

@@ -57,7 +57,7 @@ In addition to that it provides us information from the whole observable context
 We can track next, error, and complete events:
 
 ```html
-<ng-container *ngrxLet="number$ as n; let e = $error; let c = $complete">
+<ng-container *ngrxLet="number$ as n; error as e; complete as c">
   <app-number [number]="n" *ngIf="!e && !c">
   </app-number>
 

projects/ngrx.io/content/guide/migration/v15.md

@@ -144,3 +144,27 @@ import { LetModule, PushModule } from '@ngrx/component';
 })
 export class MyFeatureModule {}
 ```
+
+#### Renamed LetViewContext Properties
+
+The `$` prefix is removed from `LetViewContext` property names.
+
+BEFORE:
+
+`LetViewContext` property names contain the `$` prefix:
+
+```html
+<ng-container *ngrxLet="obs$; $error as e; $complete as c">
+  ...
+</ng-container>
+```
+
+AFTER:
+
+`LetViewContext` property names don't contain the `$` prefix:
+
+```html
+<ng-container *ngrxLet="obs$; error as e; complete as c">
+  ...
+</ng-container>
+```