Navbar custom component not displayed correctly menu page

Ionic Framework ionic-v3
1

Am trying to make a custom component that handles a navbar that I will be using in many pages that are accessible through a menu., this component has three ion icons inside buttons, however when I put the HTML code in a component.html and use that component selector in the page HTML, the icons are not displayed even though they’re there because I can press them. However if I put the code directly in the page HTML, it works correctly.

Here’s my shared components module

import { TestNavbarComponent } from './test-navbar/test-navbar';
import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { BalanceComponent } from './balance/balance';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';

@NgModule({
	declarations: [BalanceComponent, TestNavbarComponent],
	imports: [TranslateModule.forChild(),
	IonicModule.forRoot(TestNavbarComponent)],
	exports: [BalanceComponent, TestNavbarComponent]
})
export class ComponentsModule { }

Here’s my component HTML

<button ion-button icon-only menuToggle>
  <ion-icon [name]="menuIcon"></ion-icon>
</button>

<ion-title>

  <ion-buttons>
    <button ion-button icon-only class="pink">
<ion-icon [name]="menuIcon ? 'menu' : 'close'"></ion-icon>
  </button>
  </ion-buttons>
</ion-title>

<ion-buttons right>
  <button ion-button icon-only>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>

And here’s what happens if I use component vs page HTML

localhost 8100 menu home
localhost 8100 menu home.png945×199 2.64 KB

localhost 8100 menu home (1)
localhost 8100 menu home (1).png954×176 2.71 KB

I think the problem is from the IonicModule.forRoot(TestNavbarComponent) but I can’t use ionic components if I don’t.

2

As far as I know ion-navbar doesn’t like being encapsulated in a component. CSS and functionality goes missing.

3

Is there a way to fix that? Or should I just repeat the code in each individual page?

4

Is there a reason you can’t put it in app.html?

5

Not sure what you mean, I have a few pages before the menu page, and I want to reuse the component on some of the pages not all of the application.