Should I replace all properties with Angular Signals

Question

I've been using signals to replace some properties in my components which would require computed stuff, or react to the effect hook. But i was wondering if I should be replacing all my properties with signals, even if they never change.

Take for example this component which has a property items, which is just an array of object used in my template to fill a dropdown. Would there be any benefit of wrapping it in a signal instead of just a normal property, if the property never changes and is only set on initialization:

@Component({
  selector: 'mobile-app-icons',
  standalone: true,
  templateUrl: './mobile-app-icons.component.html',
  styleUrl: './mobile-app-icons.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
  ],
})
export class MobileAppIconsComponent {
 // Would turning this into a signal have any benefits
  iconTypes = [
    {
      title: 'App icon',
      key: 'APP_ICON',
      description: 'AppIconExplanation',
    },
    {
      title: 'Splash screen icon',
      key: 'SPLASH_ICON',
      description: 'SplashIconExplanation',
    },
  ];
}

To me it seems like it will not matter at all. But i was wondering if this has benefits regarding change detection at all, or can i just leave these "simple" properties as they are?

Answer 1

If a variable (field, property) doesn't change, there is no benefit in wrapping it with a Signal. You just add some unnecessary performance cost.

Answer 2

As you said there won't be any benefits regarding change detection in this case.

However you may want to convert this as a read-only Signal so that if someone in the future will be tempted to modify this value it won't be possible and it will be necessary to change the implementation.

Otherwise someone might change the value and don't understand why nothing is happening on the template.

readonly iconTypes: Signal<IconTypes[]> = signal([
        {
            title: 'App icon',
            key: 'APP_ICON',
            description: 'AppIconExplanation',
        },
        {
            title: 'Splash screen icon',
            key: 'SPLASH_ICON',
            description: 'SplashIconExplanation',
        },
    ]);

In this case you would prevent:

• Any change of the value, because the Signal type doesn't provide a setter function
• Any new assignment of the 'iconTypes' Signal because it's defined as readonly