If you're looking to enhance the functionality of your service layer, I would recommend replacing the Signal with either a Subject or BehaviourSubject.

An RxJS Subject is a unique type of Observable that also acts as an Observer. This allows us to manually input data into it, making it convenient for notifying multiple listeners simultaneously.

In this scenario, I will opt for a BehaviourSubject, which is a specialized version of Subject that stores a default value and retains the last emitted value for future subscribers (ensuring that it always emits a value upon subscription).

Take a look at the sample service below:

@Injectable({
  providedIn: 'root'
})
export class Service {
  public notifier = new BehaviorSubject<string | undefined>(undefined);

  public fetchData(data: string) {
    // business logic here
  }
}

The components requiring access to the Subject's value for fetching remote data can now subscribe to it for notifications. The parent component can utilize the .next function to update the value:

@Component({
  selector: 'app-parent',
  template: ``,
  standalone: true,
})
export class ParentComponent implements OnInit {
  constructor(
    private service: Service
  ) {
  }

  ngOnInit() {
    this.service.notifier.next("NewValue");
  }
}

@Component({
  selector: 'app-child-a',
  template: ``,
  standalone: true,
})
export class ChildAComponent {
  constructor(
    private service: Service
  ) {
    service.notifier.pipe(takeUntilDestroyed()).subscribe({
      next: data => {
        if (!data) return; 
        this.service.fetchData(data)
      },
    })
  }
}

(Note the usage of takeUntilDestroyed from Angular rxjs-interop, which helps in automatically unsubscribing when the component gets destroyed.)

Employing a Subject enables us to utilize the AsyncPipe to directly access its value in templates, similar to how we reference a signal:

@Component({
  selector: 'app-child-b',
  template: `
    <div>
      @if (service.notifier | async; as data) {
        {{ data }}
      }
    </div>
  `,
  standalone: true,
  imports: [
    CommonModule
  ]
})
export class ChildBComponent {
  constructor(
    protected service: Service
  ) {
  }
}

If transitioning to an RxJS Subject is not feasible, one alternative approach involves using the effect hook to execute logic when the signal's value changes. Below is an example utilizing a signal:

@Injectable({
  providedIn: 'root'
})
export class Service {
  public notifier = signal<string | undefined>(undefined);

  public fetchData(data: string) {
    // business logic here
  }
}

@Component({
  selector: 'app-parent',
  template: ``,
  standalone: true,
})
export class ParentComponent implements OnInit {
  constructor(
    private service: Service
  ) {
  }

  ngOnInit() {
    this.service.notifier.set("NewValue");
  }
}

@Component({
  selector: 'app-child-a',
  template: ``,
  standalone: true,
})
export class ChildAComponent {
  constructor(
    private service: Service
  ) {
    effect(() => {
      const value = this.service.notifier();
      
      if (!value) return;
      
      untracked(() => {
        this.service.fetchData(value);
      })
    });
  }
}

The effect within ChildAComponent triggers every time the notifier signal updates (tracking all signals used within it). We encapsulate our operations within the untracked callback to prevent potential side effects from hidden signals.

Edit: toObservable

Another solution could involve implementing the toObservable function from Angular rxjs-interop.
In the context of the previously mentioned Service, the implementation would appear as follows:

@Component({
  selector: 'app-child-a',
  template: ``,
  standalone: true,
})
export class ChildAComponent {

  constructor(
    private service: Service
  ) {
    toObservable(this.service.notifier).pipe(takeUntilDestroyed()).subscribe({
      next: (value) => {
        if (!value) return
        this.service.fetchData(value);
      }
    });
  }
}

One effective strategy is to establish a connection between the signal of the parent class and the child class. This allows you to register the effect callback seamlessly. An illustrative example can be found below.

//Signal handling
@Injectable({providedIn: 'root'})
export class SignalHandler {

  private readonly mainSignal = signal(0)
  public accessibleSignal = this.mainSignal.asReadonly();

  public updateMainSignal() {
    this.mainSignal.update(value => value + 1);
  }
}

// parent component
@Component({
  selector: 'app-parent',
  standalone: true,
  imports: [
    ChildComponent
  ],
  template:`
    <button (click)="triggerSignal()">Click here</button>
    <app-child/>`,
})

export class ParentComponent {
 private signalService= inject(SignalHandler);

 triggerSignal(){
   this.signalService.updateMainSignal();
 }
}

//child component
@Component({
  selector: 'app-child',
  standalone: true,
  template: `Received signal value: {{ count }}`,
})
export class ChildComponent {
    
count = 0;
private signalToManage = inject(SignalHandler).accessibleSignal;
    
constructor() {
    effect(() => this.count = this.signalToManage());
    }
}

I trust you will find this enlightening and helpful. Best regards

While I am not overly familiar with Signals, it appears that only the angular component template is capable of listening for Signal values. The Signals documentation is currently in feature preview stage, indicating that it may still be a work in progress.

To achieve your objective, you can utilize a Subject or BehaviorSubject from RxJS.

The component containing the input can invoke: subject.next(new value)

Subsequently, other components subscribing to these changes can listen by:

subject.asObservable().pipe(
   switchMap((newValue) => {
     return this.httpClient.get...
   )
)

This results in an Observable. If you wish to display the API response in your child component, assign the Observable as a field within the component class and employ the | async pipe in your Angular template for rendering.

If additional operations need to be performed on the value (which cannot be accomplished within the existing pipe), you can use the observable.subscribe(...) method to monitor changes. Remember to properly unsubscribe() in your ngOnDestroy method after implementing this.

Furthermore, consider utilizing other rxjs operators such as distinctUntilChanged() to filter out redundant input values, and shareReplay() to prevent multiple API calls triggered by various child components concurrently listening.