feat: refactor Example10Component and CollaborativeListService to use inject and linkedSignal for improved dependency management

Author: sonusindhu

src/app/examples/advanced/example10/example10.component.ts

@@ -1,12 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { CollaborativeListService } from '../../../shared/collaborative-list.service';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MarkdownComponent } from 'ngx-markdown';
 import { RouterModule } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
-import { JsonPipe, CommonModule } from '@angular/common';
+import { JsonPipe } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
 @Component({
@@ -26,10 +26,10 @@ import { FormsModule } from '@angular/forms';
  styleUrl: './example10.component.scss'
 })
 export class Example10Component {
- list = this.collabService.list;
- newItem = '';
+ private readonly collabService = inject(CollaborativeListService);
 
- constructor(private collabService: CollaborativeListService) {}
+ public list = this.collabService.list;
+ public newItem = '';
 
  add() {
  if (this.newItem.trim()) {

src/app/shared/collaborative-list.service.ts

@@ -1,22 +1,26 @@
-import { Injectable, signal } from '@angular/core';
-import { fromEvent } from 'rxjs';
+import { Injectable, linkedSignal, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { filter, fromEvent, map } from 'rxjs';
 
 const STORAGE_KEY = 'collab-list';
 
 @Injectable({ providedIn: 'root' })
 export class CollaborativeListService {
- private _list = signal<string[]>(this.loadList());
 
- readonly list = this._list.asReadonly();
+private listSignal = toSignal(
+ fromEvent<StorageEvent>(window, 'storage').pipe(
+ filter(event => event.key === STORAGE_KEY),
+ map((event) => (event.newValue ? JSON.parse(event.newValue) : []) as string[])
+ ),
+ { initialValue: [] as string[] }
+)
 
- constructor() {
- fromEvent<StorageEvent>(window, 'storage').subscribe(event => {
- if (event.key === STORAGE_KEY) {
- const updatedList = event.newValue ? JSON.parse(event.newValue) : [];
- this._list.set(updatedList);
- }
- });
- }
+ private _list = linkedSignal({
+ source: () => this.listSignal(),
+ computation: (list) => list?.length ? list : this.loadList()
+ });
+
+ readonly list = this._list.asReadonly();
 
  private loadList(): string[] {
  const data = localStorage.getItem(STORAGE_KEY);

src/assets/examples/advanced/example10/example10.component.ts.md

@@ -15,10 +15,10 @@ import { JsonPipe, CommonModule } from '@angular/common';
  styleUrl: './advanced-example10.component.scss'
 })
 export class AdvancedExample10Component {
- list = this.collabService.list;
- newItem = '';
+ private readonly collabService = inject(CollaborativeListService);
 
- constructor(private collabService: CollaborativeListService) {}
+ public list = this.collabService.list;
+ public newItem = '';
 
  add() {
  if (this.newItem.trim()) {

src/assets/examples/advanced/example10/example10.service.ts.md

@@ -1,23 +1,27 @@
 ```typescript
-import { Injectable, signal } from '@angular/core';
-import { fromEvent } from 'rxjs';
+import { Injectable, linkedSignal, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { filter, fromEvent, map } from 'rxjs';
 
 const STORAGE_KEY = 'collab-list';
 
 @Injectable({ providedIn: 'root' })
 export class CollaborativeListService {
- private _list = signal<string[]>(this.loadList());
 
- readonly list = this._list.asReadonly();
+private listSignal = toSignal(
+ fromEvent<StorageEvent>(window, 'storage').pipe(
+ filter(event => event.key === STORAGE_KEY),
+ map((event) => (event.newValue ? JSON.parse(event.newValue) : []) as string[])
+ ),
+ { initialValue: [] as string[] }
+)
 
- constructor() {
- fromEvent<StorageEvent>(window, 'storage').subscribe(event => {
- if (event.key === STORAGE_KEY) {
- const updatedList = event.newValue ? JSON.parse(event.newValue) : [];
- this._list.set(updatedList);
- }
- });
- }
+ private _list = linkedSignal({
+ source: () => this.listSignal(),
+ computation: (list) => list?.length ? list : this.loadList()
+ });
+
+ readonly list = this._list.asReadonly();
 
  private loadList(): string[] {
  const data = localStorage.getItem(STORAGE_KEY);
@@ -48,7 +52,7 @@ export class CollaborativeListService {
 
  clear() {
  this._list.set([]);
- localStorage.setItem(STORAGE_KEY, JSON.stringify([]));
+ localStorage.removeItem('collab-list');
  }
 }
 ```