Global custom component

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 posts - 2 participants

Read full topic