Link to other pages

You can link to other pages in your app from Custom Pages if they are in your menu. The code below has examples that you can put into your custom pages.

For WordPress page links, see:

See the update below about using page slugs

<!-- 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.-->


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

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


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

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


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

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

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

<button ion-button (click)="pushPage('https://apppresser.com')">  Visit Page</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 -->
<button ion-button (click)="openPage( { url:'http://mysite.com', target:'_blank', extra_classes:'system'} )">Click</button>

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

Update: Using Page Slugs

You can now use page slugs to open certain menu items. If a menu item is a custom page or a list, there is a page slug associated with that page.

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

See find the page slug. 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.

Find the Page Slug

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