feat: angular 19

nigrosimone · nigrosimone · commit 10481d7d0fc4 · 2024-12-27T13:53:09.000+01:00
diff --git a/projects/ng-http-caching-demo/src/app/app.component.html b/projects/ng-http-caching-demo/src/app/app.component.html
@@ -14,22 +14,24 @@
     </li>
     <li>
       <label>Mark request as "NO CACHEABLE"</label>
-      <input
-        type="checkbox"
-        [checked]="nocache"
-        (change)="nocache = !nocache"
-      />
+      <input type="checkbox" [(ngModel)]="nocache" [ngModelOptions]="{standalone: true}" />
     </li>
     <li>
       <select [(ngModel)]="typeOfRequest">
-        <option *ngFor="let t of typeOfRequests" [ngValue]="t">{{ t }}</option>
+        @for(t of typeOfRequests(); track t){
+        <option [ngValue]="t">{{ t }}</option>
+        }
       </select>
       <button (click)="getRequest()">EXECUTE REQUEST</button>
       <br />
-      <em *ngIf="timeSpan !== null">
-        HTTP server respond in {{ timeSpan }} ms
+      @if(timeSpan() !== null){
+      <em>
+        HTTP server respond in {{ timeSpan() }} ms
       </em>
-      <em *ngIf="count"> (for {{ count }} requests)</em>
+      }
+      @if(count()){
+      <em> (for {{ count() }} requests)</em>
+      }
     </li>
     <li>
       <hr />
@@ -64,11 +66,9 @@
       <th>Headers</th>
       <th>Status</th>
     </thead>
-    <tbody *ngIf="cachedKeys && cachedKeys.length > 0; else noCachedKeys">
-      <tr
-        *ngFor="let cachedKey of cachedKeys; trackBy: trackByCachedKey"
-        [ngClass]="cachedKey.status === 'queue' ? 'queue' : ''"
-      >
+    <tbody>
+      @for(cachedKey of cachedKeys(); track trackByCachedKey){
+      <tr [class.queue]="cachedKey.status === 'queue'">
         <td style="width: 30%; text-align: left;">
           {{ cachedKey.key }}
         </td>
@@ -79,15 +79,13 @@
           {{ cachedKey.status }}
         </td>
       </tr>
+      } @empty {
+      <tr>
+        <td style="text-align: center;" colspan="3">No cached keys</td>
+      </tr>
+      }
     </tbody>
-    <ng-template #noCachedKeys>
-      <tbody>
-        <tr>
-          <td style="text-align: center;" colspan="3">No cached keys</td>
-        </tr>
-      </tbody>
-    </ng-template>
   </table>
   <br />
   <button (click)="updateCachedKeys()">Update cached keys</button>
-</main>
+</main>
diff --git a/projects/ng-http-caching-demo/src/app/app.component.ts b/projects/ng-http-caching-demo/src/app/app.component.ts
@@ -1,15 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject, model, signal } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { lastValueFrom } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 import {
   NgHttpCachingService,
   NgHttpCachingHeaders,
   NgHttpCachingConfig,
   NgHttpCachingHeadersList,
   withNgHttpCachingContext
 } from '../../../ng-http-caching/src/public-api';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { lastValueFrom } from 'rxjs';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
 
 interface CachedKey {
   key: string;
@@ -18,31 +18,32 @@ interface CachedKey {
 }
 
 @Component({
-    // eslint-disable-next-line @angular-eslint/component-selector
-    selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css'],
-    imports: [CommonModule, FormsModule]
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+  imports: [CommonModule, FormsModule]
 })
 export class AppComponent implements OnInit {
-  public url = 'https://my-json-server.typicode.com/typicode/demo/db';
-  public key = 'GET@' + this.url;
-  public tag = '';
-  public regex: string = '';
-  public cachedKeys: CachedKey[] = [];
-  public timeSpan: number | null = null;
-  public nocache = false;
-  public lifetime = null;
-  public count = 0;
-  public typeOfRequests = ['PARALLEL', 'SEQUENTIAL', 'NESTED'];
-  public typeOfRequest = this.typeOfRequests[0];
-  private config: NgHttpCachingConfig;
+  private readonly ngHttpCachingService = inject(NgHttpCachingService);
+  private readonly http = inject(HttpClient);
+
+  public readonly url = model('https://my-json-server.typicode.com/typicode/demo/db');
+  public readonly key = model('GET@' + this.url());
+  public readonly tag = model('');
+  public readonly regex = model('');
+  public readonly cachedKeys = signal<CachedKey[]>([]);
+  public readonly timeSpan = signal<number | null>(null);
+  public readonly nocache = signal(false);
+  public readonly lifetime = model<number | null>(null);
+  public readonly count = signal(0);
+  public readonly typeOfRequests = signal(['PARALLEL', 'SEQUENTIAL', 'NESTED']);
+  public readonly typeOfRequest = model(this.typeOfRequests()[0]);
+
+  private readonly config: NgHttpCachingConfig;
   private timer!: ReturnType<typeof setTimeout>;
 
-  constructor(
-    private ngHttpCachingService: NgHttpCachingService,
-    private http: HttpClient
-  ) {
+  constructor() {
     this.config = this.ngHttpCachingService.getConfig();
   }
 
@@ -51,21 +52,29 @@ export class AppComponent implements OnInit {
   }
 
   async getRequest(): Promise<void> {
-    this.timeSpan = null;
-    this.count = 0;
+    this.timeSpan.set(null);
+    this.count.set(0);
     const timeStart = new Date();
 
+    /**
+    * @see https://github.com/nigrosimone/ng-http-caching?tab=readme-ov-file#headers
+    */
     let headers = new HttpHeaders();
     if (this.tag) {
-      headers = headers.set(NgHttpCachingHeaders.TAG, this.tag);
+      headers = headers.set(NgHttpCachingHeaders.TAG, this.tag());
     }
-    if (this.nocache) {
+    if (this.nocache()) {
       headers = headers.set(NgHttpCachingHeaders.DISALLOW_CACHE, '1');
     }
-    if (this.lifetime && Number(this.lifetime) !== this.config.lifetime) {
-      headers = headers.set(NgHttpCachingHeaders.LIFETIME, this.lifetime);
+    const lifetime = this.lifetime();
+    if (lifetime && Number(lifetime) !== this.config.lifetime) {
+      headers = headers.set(NgHttpCachingHeaders.LIFETIME, lifetime.toString());
     }
 
+    /**
+    * You can override NgHttpCachingConfig
+    * @see https://github.com/nigrosimone/ng-http-caching?tab=readme-ov-file#httpcontext
+    */
     const context = withNgHttpCachingContext({
       isExpired: () => {
         console.log('context:isExpired');
@@ -81,45 +90,45 @@ export class AppComponent implements OnInit {
       }
     });
 
-    switch (this.typeOfRequest) {
+    switch (this.typeOfRequest()) {
       case 'SEQUENTIAL': {
         // test sequential requests
         const result1 = await lastValueFrom(
-          this.http.get(this.url, { headers, context })
+          this.http.get(this.url(), { headers, context })
         );
         console.log('Sequential response 1', result1);
-        this.count++;
+        this.count.update(value => value + 1);
         const result2 = await lastValueFrom(
-          this.http.get(this.url, { headers, context })
+          this.http.get(this.url(), { headers, context })
         );
         console.log('Sequential response 2', result2);
-        this.count++;
-        this.timeSpan = new Date().getTime() - timeStart.getTime();
+        this.count.update(value => value + 1);
+        this.timeSpan.set(new Date().getTime() - timeStart.getTime());
         this.updateCachedKeys();
         break;
       }
       case 'PARALLEL': {
         // test parallel requests
         const results = await Promise.all([
-          lastValueFrom(this.http.get(this.url, { headers, context })),
-          lastValueFrom(this.http.get(this.url, { headers, context })),
+          lastValueFrom(this.http.get(this.url(), { headers, context })),
+          lastValueFrom(this.http.get(this.url(), { headers, context })),
         ]);
-        this.count++;
-        this.count++;
-        this.timeSpan = new Date().getTime() - timeStart.getTime();
+        this.count.update(value => value + 1);
+        this.count.update(value => value + 1);
+        this.timeSpan.set(new Date().getTime() - timeStart.getTime());
         this.updateCachedKeys();
         console.log('Parallel responses', results);
         break;
       }
       case 'NESTED': {
         // test nested requests
-        this.http.get(this.url, { headers, context }).subscribe((result1) => {
+        this.http.get(this.url(), { headers, context }).subscribe((result1) => {
           console.log('Nested response 1', result1);
-          this.count++;
-          this.http.get(this.url, { headers, context }).subscribe((result2) => {
+          this.count.update(value => value + 1);
+          this.http.get(this.url(), { headers, context }).subscribe((result2) => {
             console.log('Nested response 2', result2);
-            this.count++;
-            this.timeSpan = new Date().getTime() - timeStart.getTime();
+            this.count.update(value => value + 1);
+            this.timeSpan.set(new Date().getTime() - timeStart.getTime());
             this.updateCachedKeys();
           });
         });
@@ -129,28 +138,32 @@ export class AppComponent implements OnInit {
   }
 
   clearCache(): void {
+    /** @see https://github.com/nigrosimone/ng-http-caching?tab=readme-ov-file#cache-service */
     this.ngHttpCachingService.clearCache();
     this.updateCachedKeys();
   }
 
   clearCacheByTag(): void {
-    this.ngHttpCachingService.clearCacheByTag(this.tag);
+    /** @see https://github.com/nigrosimone/ng-http-caching?tab=readme-ov-file#cache-service */
+    this.ngHttpCachingService.clearCacheByTag(this.tag());
     this.updateCachedKeys();
   }
 
   clearCacheByRegex(): void {
-    this.ngHttpCachingService.clearCacheByRegex(new RegExp(this.regex));
+    /** @see https://github.com/nigrosimone/ng-http-caching?tab=readme-ov-file#cache-service */
+    this.ngHttpCachingService.clearCacheByRegex(new RegExp(this.regex()));
     this.updateCachedKeys();
   }
 
   clearCacheByKey(): void {
-    this.ngHttpCachingService.clearCacheByKey(this.key);
+    /** @see https://github.com/nigrosimone/ng-http-caching?tab=readme-ov-file#cache-service */
+    this.ngHttpCachingService.clearCacheByKey(this.key());
     this.updateCachedKeys();
   }
 
   updateCachedKeys(): void {
     clearTimeout(this.timer);
-    
+
     const keys: CachedKey[] = [];
 
     this.ngHttpCachingService.getStore().forEach((value, key) => {
@@ -170,7 +183,7 @@ export class AppComponent implements OnInit {
     this.ngHttpCachingService.getQueue().forEach((_, key) => {
       keys.push({ key, headers: [], status: 'queue' });
     });
-    this.cachedKeys = keys;
+    this.cachedKeys.set(keys);
 
     this.timer = setTimeout(() => this.updateCachedKeys(), 100);
   }
@@ -179,3 +192,9 @@ export class AppComponent implements OnInit {
     return cachedKey.key + '@' + cachedKey.status;
   }
 }
+
+/**
+ * NgHttpCaching demo
+ * Cache for HTTP requests in Angular application.
+ * see https://www.npmjs.com/package/ng-http-caching
+ */
diff --git a/projects/ng-http-caching-demo/src/main.ts b/projects/ng-http-caching-demo/src/main.ts
@@ -1,18 +1,15 @@
-import { enableProdMode, isDevMode } from '@angular/core';
+import { provideExperimentalZonelessChangeDetection } from "@angular/core"
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { withNgHttpCachingLocalStorage, provideNgHttpCaching } from 'projects/ng-http-caching/src/public-api';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
-if (!isDevMode()) {
-  enableProdMode();
-}
-
 bootstrapApplication(AppComponent, {
   providers: [
     provideNgHttpCaching({
       store: withNgHttpCachingLocalStorage()
     }),
-    provideHttpClient(withInterceptorsFromDi())
+    provideHttpClient(withInterceptorsFromDi()),
+    provideExperimentalZonelessChangeDetection(),
   ]
 });
diff --git a/projects/ng-http-caching-demo/src/polyfills.ts b/projects/ng-http-caching-demo/src/polyfills.ts
@@ -55,7 +55,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js';  // Included with Angular CLI.
+// import 'zone.js';  // Included with Angular CLI.
 
 
 /***************************************************************************************************
