linked-signals-indirection.component.ts

import {Component, signal} from '@angular/core';

@Component({
  template: `
    <!-- More or less okay, as a big selling point for linked signals
         is to provide the ability of modifying the state from UI 
         by the end user -->
    <input [(ngModel)]="fullName" placeholder="Edit full name" />
  `,
})
export class SkolComponent {
  firstName = signal('John');
  lastName = signal('Doe');
  fullName = linkedSignal(() => `${this.firstName()} ${this.lastName}`);

  someMethod() {
    // now there is increasing indirection
    // `fullName` is defined previously, but a part
    // of its behavior is defined here, making the code
    // way less reactive
    this.fullName.set('Jane Doe');
  }

  someOtherMethod() {
    // now this is getting out of hand, the dependency
    // graph of this signal is getting messier
    // and now it is even harder to reason about
    // this particular linked signal
    // imagine having dozens of such calls
    // with dozens of lines of code between them 
    this.fullName.set('Freddy Mercury');
  }
}