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) -- chargingString derived from isOn, onString, offString
- HStackComponent (
src/components/hstack/hstack.component.ts) -- alignment derived from justifyContent, alignItems
- CircularPercentageComponent (
src/components/circular-percentage/circular-percentage.component.ts) -- 4 sizing properties derived from dimension
- BatteryPercentageComponent (
src/components/battery-percentage/battery-percentage.component.ts) -- 7 rendering properties derived from percentage, height, width
- HalfGaugeComponent (
src/components/half-gauge/half-gauge.component.ts) -- widthpx, heightpx, label, percentage, fontsize derived from current, min, max, unit, size
- GraphComponent (
src/components/graph/graph.component.ts) -- timeRangeMs derived from timeRangeSec
- DoubleLineGraphComponent (
src/components/double-line-graph/double-line-graph.component.ts) -- timeRangeMs derived from timeRangeSec
- PieChartComponent (
src/components/pie-chart/pie-chart.component.ts) -- already uses input() signals but reads them in ngOnInit instead of computed()/effect()
- SidebarCardComponent (
src/pages/graph-page/graph-sidebar/sidebar-card/sidebar-card.component.ts) -- iconId derived from title
- 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
Description
Several components read
@Input()values insidengOnInitto 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 andcomputed()for derived state so values stay reactive. RemovengOnInitfrom components where it only existed to compute derived input state.Example
circular-percentage.component.tsreadsthis.dimensioninngOnInitto compute sizing values:Affected Components
src/components/switch/switch.component.ts) --chargingStringderived fromisOn,onString,offStringsrc/components/hstack/hstack.component.ts) --alignmentderived fromjustifyContent,alignItemssrc/components/circular-percentage/circular-percentage.component.ts) -- 4 sizing properties derived fromdimensionsrc/components/battery-percentage/battery-percentage.component.ts) -- 7 rendering properties derived frompercentage,height,widthsrc/components/half-gauge/half-gauge.component.ts) --widthpx,heightpx,label,percentage,fontsizederived fromcurrent,min,max,unit,sizesrc/components/graph/graph.component.ts) --timeRangeMsderived fromtimeRangeSecsrc/components/double-line-graph/double-line-graph.component.ts) --timeRangeMsderived fromtimeRangeSecsrc/components/pie-chart/pie-chart.component.ts) -- already usesinput()signals but reads them inngOnInitinstead ofcomputed()/effect()src/pages/graph-page/graph-sidebar/sidebar-card/sidebar-card.component.ts) --iconIdderived fromtitlesrc/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.ts) --nodes,nodesWithVisibilityTogglederived fromdataTypesAcceptance Criteria
@Input()+ngOnInitderived state toinput()+computed()ngOnInitremoved from components where it only existed to compute derived input stateinnerCircleDimension()instead ofinnerCircleDimension)npx ng lintandnpx prettier --checkpass