Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#562 1 commento 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 5 giorni

@bracyw ci sta già lavorando.

Dal 29/3/2026.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

angular-client straightforward
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
Lingua principale
TypeScript
Stelle
5
Fork
1
Merge medio
5g 13h
PR unite (30g)
24

Preparare l'ambiente

  • Nessun Dockerfile né file Docker Compose
  • Ha un modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Northeastern-Electric-Racing/Argos

Tutte le issue di Northeastern-Electric-Racing/Argos

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.