Re-usable components in Ionic 6 Angular tabs-starter
Tags: ionic, angular
Published: 2022-04-15 10:32:54

There are some good tutorials for creating re-usable components in Ionic 6, e.g. [Create Reusable Progress Bar Component](https://www.positronx.io/create-progress-bar-component-in-ionic/). While those tutorials seem to work in some of the provided [starter options of Ionic](https://ionicframework.com/docs/v3/cli/starters.html) (blank, sidemenu, etc.), they fail in the tabs-starter.

While I was setting up a fresh demo repository to share my error message with my fellow developers, I noticed something strange:

There was already a component which was re-used on multiple tabs: 

```javascript
<app-explore-container name="Tab 1 page"></app-explore-container>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrde43shw9qo220sews2.png)

```javascript
<app-explore-container name="Tab 2 page"></app-explore-container>
```
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5jucjymu1a910zxr0q1.png)

And - the strangest thing was - it just worked on all tab pages!
 
Turns out ... I deleted this example component early on in my Ionic app and totally forgot about it. 🤦

![Forehead Slap Slapping Forehead GIF](
https://c.tenor.com/YctxttUmGMYAAAAC/forehead-slap-slapping-forehead.gif)

After investigating the [source code of the tabs-starter](https://github.com/ionic-team/starters/tree/main/angular/official/tabs), I learned the following:

You need to define a module for your component first!

```javascript
/* explore-container.module.ts */
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { ExploreContainerComponent } from './explore-container.component';

@NgModule({
  imports: [ CommonModule, FormsModule, IonicModule],
  declarations: [ExploreContainerComponent],
  exports: [ExploreContainerComponent]
})
export class ExploreContainerComponentModule {}
```
[Source code](https://github.com/ionic-team/starters/blob/main/angular/official/tabs/src/app/explore-container/explore-container.module.ts)

And finally the module (instead of the component) must be imported into every tab module where we want to use it:

```javascript
/* tab1.module.ts */
import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab1Page } from './tab1.page';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';

import { Tab1PageRoutingModule } from './tab1-routing.module';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ExploreContainerComponentModule,
    Tab1PageRoutingModule
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}
```
[Source code](https://github.com/ionic-team/starters/blob/main/angular/official/tabs/src/app/tab1/tab1.module.ts)

I'm not quite sure yet how the module creation is done correctly via ionic-cli, it should be something like that with [ionic generate](https://ionicframework.com/docs/cli/commands/generate):

`ionic generate module explore-container/explore-container`

See e.g. ["Create component & add it to a specific module with Angular-CLI"](https://stackoverflow.com/questions/40649799/create-component-add-it-to-a-specific-module-with-angular-cli) discussion on stackoverflow for more information. 

Happy to hear your solutions in the comments!