Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#562 1 comentario 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 5 días

@bracyw ya está trabajando en esto.

Desde el 29/3/2026.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

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
Lenguaje dominante
TypeScript
Estrellas
5
Forks
1
Merge medio
5 d 13 h
PR fusionados (30 d)
24

Preparar el entorno

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de Northeastern-Electric-Racing/Argos

Todos los issues de Northeastern-Electric-Racing/Argos

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.