Usar un componente en varios módulos en Angular

Como ya debes haber averiguado si estas aquí, los componentes en tu aplicación de Angular sólo puede declararse dentro de un único módulo. Esto supone un problema debido a que en ocasiones queremos reutilizar un componente en diferentes partes de la aplicación (por ejemplo un datepicker o un Pipe).

Para resolver el problema lo más cómodo es declarar un módulo “shared” dentro del cual crearemos los componentes que queramos compartir en el resto de la aplicación.

Un ejemplo seria:

@NgModule({
  declarations: [ SharedComponent ],
  exports: [ SharedComponent ]
})
export class SharedModule {}

Después sólo necesitaremos importar el módulo allí donde queramos usarlo.

@NgModule({
   imports: [ SharedModule ]
})
export class ModuloQueUsaTuSharedComponent {}

Si tienes un grupo de Pipes que quieres usar en toda tu aplicación puede ser muy útil definir un módulo que los contenga a todos. Pero por supuesto, si piensas crear un componente para usarlo en diferentes aplicaciones debes definir un módulo que contenga tu componente de manera que puedas usarlo únicamente importándolo.

Ahora ya sabes cómo definir tus componentes dentro de un módulo como todo un profesional!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.