Northeastern-Electric-Racing / Northeastern-Electric-Racing/Argos
Convert ngOnInit input reads to computed() for full signal reactivity
@bracyw is already working on this.
Since Mar 29, 2026.
- 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
- SwitchComponent (
src/components/switch/switch.component.ts) --chargingStringderived fromisOn,onString,offString - HStackComponent (
src/components/hstack/hstack.component.ts) --alignmentderived fromjustifyContent,alignItems - CircularPercentageComponent (
src/components/circular-percentage/circular-percentage.component.ts) -- 4 sizing properties derived fromdimension - BatteryPercentageComponent (
src/components/battery-percentage/battery-percentage.component.ts) -- 7 rendering properties derived frompercentage,height,width - HalfGaugeComponent (
src/components/half-gauge/half-gauge.component.ts) --widthpx,heightpx,label,percentage,fontsizederived fromcurrent,min,max,unit,size - GraphComponent (
src/components/graph/graph.component.ts) --timeRangeMsderived fromtimeRangeSec - DoubleLineGraphComponent (
src/components/double-line-graph/double-line-graph.component.ts) --timeRangeMsderived fromtimeRangeSec - PieChartComponent (
src/components/pie-chart/pie-chart.component.ts) -- already usesinput()signals but reads them inngOnInitinstead ofcomputed()/effect() - SidebarCardComponent (
src/pages/graph-page/graph-sidebar/sidebar-card/sidebar-card.component.ts) --iconIdderived fromtitle - GraphSidebarMobileComponent (
src/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.ts) --nodes,nodesWithVisibilityTogglederived fromdataTypes
Acceptance Criteria
- All 10 components migrated from
@Input()+ngOnInitderived state toinput()+computed() ngOnInitremoved from components where it only existed to compute derived input state- Templates updated to call signal getters (e.g.
innerCircleDimension()instead ofinnerCircleDimension) - No regressions in component rendering
npx ng lintandnpx prettier --checkpass
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.