Ionic v4 using <ion-nav-push> without custom elements

Ionic Framework
1

I’m not clear on the concept of html custom elements and the correct usage of <ion-nav-push>.

Why does this work in my page component:

import { HomePage } from '../home/home.page';

@Component({...})
export class SomePage {

myHomePage = HomePage;

navPush() {
    const nav = document.querySelector('ion-nav');
    await nav.componentOnReady();
    nav.push(myHomePage);
}

}

but this does not in the markup?

      // myHomePage is reference to imported HomePage in controller
      <ion-nav-push component="myHomePage">
          <ion-button fill="outline">
            <ion-icon name="add" slot="icon-only"></ion-icon>
          </ion-button>
      </ion-nav-push>

why do I have to create a custom element to use <ion-nav-push> in markup?

2 Likes