feat(): improve package.json

Author: tomalaforge

apps/testing/29-real-life-application/src/app/detail/detail.component.ts

@@ -1,17 +1,17 @@
+import { AsyncPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { RouterLink } from '@angular/router';
-import { LetDirective } from '@ngrx/component';
 import { provideComponentStore } from '@ngrx/component-store';
 import { DetailStore } from './detail.store';
 
 @Component({
   selector: 'app-detail',
-  imports: [MatButtonModule, RouterLink, MatProgressBarModule, LetDirective],
+  imports: [MatButtonModule, RouterLink, MatProgressBarModule, AsyncPipe],
   template: `
     <h2 class="mb-2 text-xl">Ticket Detail:</h2>
-    <ng-container *ngrxLet="vm$ as vm">
+    @if (vm$ | async; as vm) {
       @if (vm.loading) {
         <mat-progress-bar mode="query" class="mt-5"></mat-progress-bar>
       }
@@ -35,7 +35,7 @@ import { DetailStore } from './detail.store';
           </div>
         </section>
       }
-    </ng-container>
+    }
 
     <button
       class="mt-8"

apps/testing/29-real-life-application/src/app/list/list.component.ts

@@ -1,9 +1,9 @@
+import { AsyncPipe } from '@angular/common';
 import { Component, inject, OnInit } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { LetDirective } from '@ngrx/component';
 import { provideComponentStore } from '@ngrx/component-store';
 import { TicketStore } from './ticket.store';
 import { AddComponent } from './ui/add.component';
@@ -18,7 +18,7 @@ import { RowComponent } from './ui/row.component';
     MatFormFieldModule,
     MatProgressBarModule,
     MatInputModule,
-    LetDirective,
+    AsyncPipe,
   ],
   template: `
     <h2 class="mb-2 text-xl">Tickets</h2>
@@ -32,7 +32,7 @@ import { RowComponent } from './ui/row.component';
         placeholder="write an article" />
     </mat-form-field>
 
-    <ng-container *ngrxLet="vm$ as vm">
+    @if (vm$ | async; as vm) {
       <app-add
         [loading]="vm.loading"
         (addTicket)="ticketStore.addTicket($event)"></app-add>
@@ -52,7 +52,7 @@ import { RowComponent } from './ui/row.component';
       <footer class="text-red-500">
         {{ vm.error }}
       </footer>
-    </ng-container>
+    }
   `,
   providers: [provideComponentStore(TicketStore)],
   host: {