I want to initialize my input signal with a default class and some data manipulations

I am using this package, ang-jsoneditor, which contains the below initialization code.

@Component({ ... })
export class AppComponent {
  public editorOptions: JsonEditorOptions;
  public data: any;
  // optional
  @ViewChild(JsonEditorComponent, { static: false }) editor: JsonEditorComponent;

  constructor() {
    this.editorOptions = new JsonEditorOptions()
    this.editorOptions.modes = ['code', 'text', 'tree', 'view']; // set all allowed modes
    ...
  }

}

I want to convert this to the new signals method of handling inputs, but I cant seem to figure out how to move the initialization code inside the input signal.

@Component({ ... })
export class AppComponent {
  public editorOptions = input<JsonEditorOptions>({});
  public data: any = input.required();
  // optional
  editor = viewChild(JsonEditorComponent);

  constructor() {
    // how do I move this code inside the `input` default value?
    this.editorOptions = new JsonEditorOptions()
    this.editorOptions.modes = ['code', 'text', 'tree', 'view']; // set all allowed modes
    ...
  }

}

We can use an IIFE (Immediately Invoked Function Expression) to initialize the class then set the properties and finally return the initialized editorOptions property.

So your code will be:

@Component({ ... })
export class AppComponent {
  public editorOptions = input<JsonEditorOptions>(
    (() => {
      const editorOptions = new JsonEditorOptions()
      editorOptions.modes = ['code', 'text', 'tree', 'view']; // set all allowed modes
      return editorOptions;
    })()
  );
  public data: any = inpu.required();
  // optional
  editor = viewChild(JsonEditorComponent);
}