Link to other pages

To link to a page in your app, it must be in the menu. You cannot link to a page that is not in the menu.

The easiest way to link to another page is to add a new block in the Page Builder, and choose the Button block. Add the slug to your page.

Find the Page Slug

To find the page slug of your custom pages, open the custom page editor and click the "CSS & Code Help" box.

Custom HTML Pages

If using a custom HTML page, you can use the code below.

<ion-button (click)="pushPage('visit-page')">Visit Page</ion-button>

 For menu items that are external links, no page slug is associated with this, so you still need to use the method described above and refer to the item using an index number.

Advanced Page Linking

If you need more control over page links, see below.

A note on indexing: when you see something like pages.all.items[0] below, that means it's the first item of all your menu items. Indexing starts at 0, so the second menu item is pages.all.items[1], etc. If you have both a tab menu and a side menu, tabs go first in the pages.all.items array.

<!-- Linking to other app pages with AppPresser 3.The 0 refers to the order in the menu, 0 is first, 1 is second item, etc. Note: dividers do not count -->


<!-- Link to another app page with a back button -->

<ion-button (click)="pushPage(pages.all.items[0])">  Visit Page</ion-button>

<!-- Link to a WordPress page with a back button -->

<ion-button (click)="pushPage( { url:'https://mysite.com/page/', type:'custom'} )">  Visit Page</ion-button>


<!-- Link to another app page without a back button -->

<ion-button (click)="openPage(pages.all.items[0])">  Visit Page</ion-button> 


<!-- Link to another page if using a tab menu -->

<ion-button (click)="pushPage(pages.tab_menu.items[0])">  Visit Page</ion-button>

<!-- Link to an external page that is in the menu -->

<ion-button (click)="pushPage('https://apppresser.com')">  Visit Page</ion-button>

<!-- Link to an external page that is not in the menu -->

<a href="https://mysite.com" target="_blank">In App Browser Link</a>

<!-- On your WordPress site, add a link that changes the app root page -->
See links at the top of page for links for your WordPress pages.

<!-- Link to the system browser, such as Chrome or Safari -->
<ion-button (click)="openPage( { url:'http://mysite.com', target:'_blank', extra_classes:'system'} )">Click</ion-button>

<!-- Link to the In-App browser (IAB) -->
<ion-button (click)="openPage( { url:'http://mysite.com', target:'_blank' } )">Click</ion-button>