Controlando un input

Siempre que se haya creado una subscripción a un formulario, hay que asegurarnos de destruir la subscripción cuando ya no se necesite; evitar memory leaks. Fácilmente se podría guardar esa sub en una variabel de tipo Subscription. Y cuando se ejecute el ciclo de vida onDestroy, ejecutar una desuscripción ```js export class LabsComponent implements OnDestroy { form = new FormControl(); sub: Subscription | null = null; ngOnDestroy(): void { if (this.sub !== null) { this.sub.unsubscribe(); } } constructor() { this.handleFormSubscription(); } handleFormSubscription() { this.sub = this.form.valueChanges.subscribe(x => console.log(x)) } name = signal('Daniel'); } ```

Recuerden que en esta nueva version de Angular se manejan los componentes como StandAlone components <https://angular.io/guide/standalone-components> Por lo cual los imports debemos realirlo directamente desde el componente que lo vamos a necesitar. Como identificamos si nuestro component es standAlone. Con la bandera que trae el component `@Component({  selector: 'app-labs',  standalone: true,  imports: [CommonModule, ReactiveFormsModule],  templateUrl: './labs.component.html',  styleUrl: './labs.component.scss'})`

SI tiene error al importar ReactiveFormsModule vayan al archivo app.module.ts y eliminen LabsComponent de las declaraciones de @NgModule

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    // ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

una consulta , ¿es bueno realizar todas las funcionalizades de manera reactiva ? o esto realizara una sobrecarga de procesamiento a nivel de frontend ?

angular 18 \<input type="color" formControlName="">

y pensar que quería aprender Angular 18. Tengo que buscar en la documentación. GG.

Aquí les dejo un texto que profundiza en la **Gestión Eficiente de Suscripciones en Angular, Prevención de Fugas de Memoria y Optimización del Rendimiento.** En Angular, gestionar adecuadamente las suscripciones es crucial para evitar problemas de rendimiento, especialmente en aplicaciones complejas o de larga duración. Suscribirse y desuscribirse correctamente tiene varias ventajas, principalmente la prevención de fugas de memoria. Las fugas de memoria ocurren cuando un componente se destruye, pero las suscripciones a observables o eventos continúan activas, ocupando recursos innecesarios y potencialmente afectando el rendimiento general de la aplicación. **Componentes que se Crean y Destruyen Frecuentemente** Cuando un componente se crea y destruye con frecuencia, es importante evaluar si las suscripciones que realiza deben gestionarse manualmente. Esto es particularmente relevante para observables que emiten valores continuamente o no se completan automáticamente, como aquellos creados con `Subject`, `interval`, o suscripciones a eventos del DOM como `resize` o `scroll`. En estos casos, es recomendable suscribirse en el ciclo de vida `ngOnInit` y desuscribirse en `ngOnDestroy` para liberar los recursos cuando el componente ya no esté en uso. **Cuándo Vale la Pena Desuscribirse y Cuándo No** No siempre es necesario desuscribirse manualmente. Si utilizas el `async` pipe en las plantillas de Angular, la suscripción y desuscripción son gestionadas automáticamente por el framework, por lo que no necesitas preocuparte por ello. Además, cuando trabajas con observables que se completan automáticamente, como las solicitudes HTTP realizadas con `HttpClient`, Angular maneja la liberación de recursos sin intervención manual. De igual manera, algunas suscripciones internas de Angular, como las de formularios reactivos (`FormControl`), son gestionadas por Angular y no requieren una desuscripción explícita. En resumen, la decisión de suscribirse y desuscribirse debe basarse en la naturaleza del observable o evento. Si emite valores continuamente o no se completa por sí solo, la desuscripción es clave para mantener un rendimiento óptimo. En cambio, si el observable se completa automáticamente o utilizas herramientas como el `async` pipe, Angular ya maneja estos casos de manera eficiente.

No sé por qué en Firefox no funciona, pero en Chrome funciona perfectamente. Solo quería jugar un poco y cambiarle el color a un simple div. Realmente es muy útil todo lo que se ve en el curso ```js <input type="color" [formControl]="colorCtrl"> ```