Global custom component

Ionic Framework
1

Hey guys,

I have a question.

I coded a custom component - common navigation bar - cause I would like to use this navigation on all pages, cause it will always be the same (desktop application). I currently inject this component on each page like:

File: 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 { CommonNavbarComponentModule } from '../common-navbar/common-navbar.module';
import { Tab1PageRoutingModule } from './tab1-routing.module';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ...
    CommonNavbarComponentModule,
    Tab1PageRoutingModule
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}

And on the page (tab1.page.html) itself like this:

<app-common-navbar name="Tab 1 page"></app-common-navbar>
<ion-content>
      Some content
</ion-content>

…but I would like to use it globally. What would be the correct approach and where and how to inject it? Any example available?

Thanks in advance,
Oliver

2

Insert the Component in the app.component and declare it in app.module.

The app.component contains the Ionic Router Element so it’s kind of the main page where you can do stuff like this :blush: