🍕Angular Quick Bite: Standalone componentes [Español]

Foto de Noah Silliman en Unsplash

Componentes Independientes en Angular

Los componentes independientes, también conocidos como “standalone components” en inglés, son un tipo de componente que se utiliza para crear componentes reutilizables que no forman parte de ningún ngModule y que se pueden usar con otros componentes independientes o basados ​​en módulos.

¿Cómo se crean los componentes, directivas y pipes standalone?

Para crear un componente standalone, se debe generar un nuevo componente mediante la línea de comandos de Angular.

Se puede crear un componente standalone, pipe o directiva usando la bandera--standalone

ng g p search --standalone
ng g d text --standalone
ng g c login --standalone

A partir de Angular 14, podemos convertir un componente en standalone agregando a la clase ‘standalone: true’ e importando directamente sus dependencias y sin necesidad de declararlo en un NgModule

@Component({
  standalone: true,
  selector: 'photo-gallery',
  imports: [ImageGridComponent],
  template: `
    ... <image-grid [images]="imageList"></image-grid>
  `,
})
export class PhotoGalleryComponent {
  // component logic
}

Lo importante es asegurarse de que no dependa de ningún otro componente, es decir, que su funcionalidad y diseño sean independientes y no se basen en la lógica de otros componentes. Esto hace que el componente sea fácil de utilizar y mantener, ya que puede ser utilizado en cualquier lugar de la aplicación.

¿Qué podemos hacer con Standalone componentes?

• Usar NgModules existentes en un componente standalone (Ver)
• Usar de componentes standalone en aplicaciones basadas en NgModule (Ver)
• Hacer Bootstrapping de una aplicación utilizando un componente independiente (Ver)
• Enrutamiento y carga diferida de Standalone componentes (Ver)

Conclusion

Los standalone components son una herramienta poderosa en el arsenal de un desarrollador Angular. Con la capacidad de crear componentes autónomos, se puede mejorar la reutilización de código, la escalabilidad y el rendimiento de la aplicación. Finalmente, el objetivo principal de standalone components es optimizar la experiencia de creación de componentes, pipes y directivas, al reducir la necesidad de NgModules.

Did you enjoy the post? Do you think there’s anything that could be improved or done differently? Don’t hesitate to leave it in the comments! You can also connect with me on my Twitter, facebook y LinkedIn accounts. ☺

Don’t forget to share it and feel free to give it a clap or two! 👏