Northeastern-Electric-Racing / Northeastern-Electric-Racing/Argos

Convert ngOnInit input reads to computed() for full signal reactivity

Open
#562 1 comment 0 reactions 1 assignee View on GitHub

@bracyw is already working on this.

Since Mar 29, 2026.

angular-client straightforward
Dominant language
TypeScript
Stars
5
Forks
1
Avg merge
4d 22h
Merged PRs (30d)
26

Description

Description

Several components read @Input() values inside ngOnInit to derive local state. This breaks signal reactivity -- if the parent updates the input after init, the derived values go stale.

Migrate these components to use the input() signal function and computed() for derived state so values stay reactive. Remove ngOnInit from components where it only existed to compute derived input state.

Example

circular-percentage.component.ts reads this.dimension in ngOnInit to compute sizing values:

// Before
@Input() dimension!: number;
innerCircleDimension: number = 0;

ngOnInit() {
  this.innerCircleDimension = this.dimension * 0.87;
}

// After
dimension = input.required<number>();
innerCircleDimension = computed(() => this.dimension() * 0.87);
Affected Components
  1. SwitchComponent (src/components/switch/switch.component.ts) -- chargingString derived from isOn, onString, offString
  2. HStackComponent (src/components/hstack/hstack.component.ts) -- alignment derived from justifyContent, alignItems
  3. CircularPercentageComponent (src/components/circular-percentage/circular-percentage.component.ts) -- 4 sizing properties derived from dimension
  4. BatteryPercentageComponent (src/components/battery-percentage/battery-percentage.component.ts) -- 7 rendering properties derived from percentage, height, width
  5. HalfGaugeComponent (src/components/half-gauge/half-gauge.component.ts) -- widthpx, heightpx, label, percentage, fontsize derived from current, min, max, unit, size
  6. GraphComponent (src/components/graph/graph.component.ts) -- timeRangeMs derived from timeRangeSec
  7. DoubleLineGraphComponent (src/components/double-line-graph/double-line-graph.component.ts) -- timeRangeMs derived from timeRangeSec
  8. PieChartComponent (src/components/pie-chart/pie-chart.component.ts) -- already uses input() signals but reads them in ngOnInit instead of computed()/effect()
  9. SidebarCardComponent (src/pages/graph-page/graph-sidebar/sidebar-card/sidebar-card.component.ts) -- iconId derived from title
  10. GraphSidebarMobileComponent (src/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.ts) -- nodes, nodesWithVisibilityToggle derived from dataTypes
Acceptance Criteria
  • All 10 components migrated from @Input() + ngOnInit derived state to input() + computed()
  • ngOnInit removed from components where it only existed to compute derived input state
  • Templates updated to call signal getters (e.g. innerCircleDimension() instead of innerCircleDimension)
  • No regressions in component rendering
  • npx ng lint and npx prettier --check pass

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.