How to derive state from required inputs without ngOnInit and constructor?

Question

I'm refactoring an Angular component to use signals throughout, but I'm stuck on how to properly initialize a signal that depends on required inputs without using ngOnInit. I am trying to see in this experiment that how it behaves without using any lifecycle hooks.

The processedData signal needs to be mutable, but its initial state must be derived from the required inputs which aren't available in the constructor.

What's the recommended Angular signals pattern for deriving initial signal state from required inputs while keeping the signal mutable for user interactions? I don't want to see this error if not using ngOnInit lifecycle:

RuntimeError: NG0950: Input "items" is required but no value is available yet. Find more at https://angular.dev/errors/NG0950

Current approach (works but uses ngOnInit):

import { Component, input, output, signal } from '@angular/core';
import { explicitEffect } from 'ngxtension/explicit-effect';

interface DataItem {
  id: string;
  name: string;
  status: string;
}

type ProcessedData = Record<string, {
  item: DataItem;
  selected: boolean;
  displayName: string;
}>;

@Component({
  selector: 'app-example',
  template: `<div>{{ processedData() | json }}</div>`
})
export class ExampleComponent {
  items = input.required<DataItem[]>();
  mode = input.required<'add' | 'remove'>();
  
  processedData = signal<ProcessedData>({});
  dataChanged = output<ProcessedData>();

  constructor() {
    explicitEffect([this.processedData], ([data]) => 
      this.dataChanged.emit(data)
    );
  }
  
  ngOnInit(): void { //trying to avoid lifecycles 
    this.processedData.set(
      this.items().reduce((acc, item) => ({
        ...acc,
        [item.id]: {
          item,
          selected: this.getInitialState(item),
          displayName: item.name.toUpperCase()
        }
      }), {})
    );
  }
  
  updateSelection(id: string): void {
    this.processedData.update(data => ({
      ...data,
      [id]: { ...data[id], selected: !data[id].selected }
    }));
  }
  
  private getInitialState(item: DataItem): boolean {
    return this.mode() === 'add' 
      ? item.status === 'ACTIVE'
      : item.status === 'FINAL';
  }
}

please share stackblitz or github repo with the issue happening — Naren Murali
– Naren Murali, Commented Oct 22 at 17:47
the error is for Input "selectionData" is required but the code is something different! — Naren Murali
– Naren Murali, Commented Oct 22 at 17:58
Well updated error, but basic idea is how to make those required inputs available without using ngOninit(). And Computed seems not working as well in my case — Eternal Sunshine
– Eternal Sunshine, Commented Oct 22 at 19:03
please share stackblitz or github repo with issue happening for debugging — Naren Murali
– Naren Murali, Commented Oct 22 at 19:25

Andres2142 · Accepted Answer · 2025-10-22 22:30:54Z

2

Use linkedSignal, it derives its value based on a signal and also you can later change it or mutate it.

@Component({...})
export class Component {
  items = input.required<DataItem[]>();
  processedData = linkedSignal(() => this.items().reducer(...));

  // mutate it whenever you need
  someFunction() {
    this.processedData.set(...);
  }
}

With this approach, you can bypass the usage of ngOnInit.

Check the following demo

You can read more about it here

edited Oct 22 at 22:30

answered Oct 22 at 16:51

Andres2142

3,0122 gold badges18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Eternal Sunshine Oct 22 at 17:01

Interesting , I read similar approach here "riegler.fr/blog/2024-12-31-lifecycle-hook-less " However in your above answer when I try to use "processedData()" in template I still see "required inputs not available error"

Andres2142 Oct 22 at 22:30

Can you check again? I have added a stackblitz example with a required input and it doesn't display any error on the template HTML.

Eternal Sunshine Oct 22 at 23:17

Yup, I think this is right. I missed some config earlier but using linked signals here totally make sense to me. Thanks

Collectives™ on Stack Overflow

How to derive state from required inputs without ngOnInit and constructor?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related