Using a Custom Angular Component in Multiple Ionic Tabs

Issue

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.

Solution

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.

Answered By - Greencoms