Using a Custom Angular Component in Multiple Ionic Tabs

Question

I created an Ionic app using the tabs starter project template. I created a custom component to use in these 3 tabs. But when I use the component in each tab *.html file, it says it isn't a known element.

I tried declaring the component in the tabs.module.ts file, as one of the answers from this question says to do, but it still says the same thing.

In the following 3 questions and their answers they are talking about importing the module that contains the component they need:

• Using component from another module (Angular)
• Angular - Using a component across multiple modules
• can't use custom component in app.component.ts in ionic 3

My component is not in another module, do I need to make another module and declare the component in that, and then import that module into the 3 tab modules where I want to use the component? Or is there a way I can just import the component and use it?

I don't think it is needed for this question, but if you need, tell me to add my code.

Read Before You Answer

1. I know that I can create a module, declare my custom components, export them, and import that module in the tab modules to use the component.
   What I want to know is if there is a way to import just the component into the 3 modules to use that component in there.
2. Many answers on StackOverflow have said that you can just declare your component in the tabs.module.ts file, but this doesn't work.

Answer 1

You have to export your Template in a Module to import it somewhere else, alternatively you could manually copy the Template in the Html, but that would be more Work and upkeep than just creating a component module like this:

You can make a component folder with all the individual component folders inside and add a component.module.ts in the upper component folder.

In the component.module.ts you only need to declare and export it like this:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { CustomComp1Component } from './custom-comp1/custom-comp1.component';

import { CustomComponent } from './custom/custom.component';
@NgModule({
    declarations: [CustomComponent, CustomComp1Component],
    imports:  [
                CommonModule,
                IonicModule
              ],
    exports: [CustomComponent, CustomComp1Component]
})
export class ComponentModule {}

only thing left to do now is import the componentmodule in the .module.ts of the page you want to use a component in (in your case the 3 individual tab1/2/3.module.ts).

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    ComponentModule // <- component Module
  ],
  declarations: [HomePage],
})

Now you should be able to use html elements with the @Component({}) selector as name in the pages you imported component module to.

I hope this solves your Problem.

PS: If I understood the Ionic Tab structure correctly importing and using the component in the tabs page would only allow you to use the component in the footer.