-1

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:

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.
Jacob Hornbeck
  • 398
  • 2
  • 19

2 Answers2

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.

Greencoms
  • 299
  • 10
  • Thank you for your answer. I knew I could do this, but I was hoping there was a way to do it without creating a whole new module just to use one component (well, maybe 2 when my project is finished) in 3 tabs. Is this the only way to do it? If it is, I will use this method, but I really want to just use the component I made, without creating a module to import it to the 3 tab modules. – Jacob Hornbeck Feb 15 '23 at 16:08
  • @JacobHornbeck Correct me if I understood you wrong but you want a Component without a Module? So just a Template? If you want that template to be defined only *once* in the application you need to export it from somewhere and import it where you want to use it the way to do it is a Module. – Greencoms Feb 21 '23 at 08:48
  • Is there a specific component thing in Angular for a template? I just want to use the one component I made and use it in each of the three tabs (which use modules) – Jacob Hornbeck Feb 22 '23 at 04:18
  • You could use ngTemplate https://angular.io/api/core/ng-template but again I think is it less work to make a component module instead of putting the template in 3 different HTMLs. – Greencoms Feb 22 '23 at 07:19
  • So it seems that I cannot just import my one component into the 3 tab modules without declaring and exporting it from a module of it's own. Thank you. If you modify your answer to state that (that it can't be done (as far as we know) to just use a component in 3 tab modules, and that the easiest way is to have a component module), I will mark your answer as the correct one. – Jacob Hornbeck Feb 22 '23 at 14:43
0

You need to declare it in the tabs.module.ts like so:

NgModule({
   imports: [ ],
   declarations: [MyComponent]
})
StackoverBlows
  • 473
  • 7
  • Please see my second paragraph to see why this answer doesn't help me. Unless there is more to add – Jacob Hornbeck Feb 15 '23 at 01:41
  • I also just tried it in a completely new Ionic Tab project, and it doesn't work to just import it in the `tabs.module.ts` file. So either this doesn't work, or there is something missing from this (and many other answers) – Jacob Hornbeck Feb 15 '23 at 02:24