Ng-container => blank page BUG

Ionic Framework ionic-v3
1

In order to have a clean and DRY ionic project, I just wanted my navbar code to be written in one place, instead of writing the whole HTML in every Ionic page.

For this purpose, I created an Angular component (not an Ionic page) named navbar, and I inject it in my pages. To keep a clean layout with no additional stuff in the DOM, I created a component with the brackets notation, like this:

@Component({
  // brackets let the selector be used as a property instead of a component
  selector: '[navbar]',
  templateUrl: 'navbar.html',
})
export class NavbarComponent {

  @Input() title: string = 'default title';
  constructor() {}

}

Then I try to inject the component in the pages like this:

<ng-container navbar title="My good title"></ng-container>

The purpose is to not create any additional node in the DOM to keep clean layout.
But, this DOES NOT WORK, as I get a blank page with no particular error in console.

As a comparison,

<div navbar title="My good title"></div>

works, but my layout is broken (ion content starts from the very top of my page, beeing hidden by navbar)

Any idea? Thanks.

// navbar.html code
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="ios-menu"></ion-icon>
    </button>

    <ion-title>{{title}}</ion-title>

    <ion-buttons margin-horizontal end>
      <img class="logo-navbar" src="../../assets/imgs/logo-hudi-noir-noborder.png">
    </ion-buttons>
  </ion-navbar>
</ion-header>

ionic (Ionic CLI) : 4.1.2
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.9