Ionic Creator

Navigation & Special Links

The Link Property

On many Components throughout Creator you'll find the Link Property. This property allows you to:

  • Link to a separate page
  • Specify Route Parameters when linking to a separate page
  • Link to an External URL
  • Open an email client with an Email Address pre-populated
  • Open the phone dialer with a Phone Number pre-populated

Linking to a Separate Page in Creator

If you'd like to navigate to a different page, you can use any of the Link-able components to do so easily. Just choose the Page option for your link, then choose the specific page you'd like to navigate to from the dropdown.

Specifying Route Parameters when Navigating to a different page

Check out our Route Parameters Documentation for more information on working with route parameters.

Cordova InAppBrowser

Note on External URLs, Emails, and Phone Numbers

If you are going to use the External URLs, Emails, or Phone Numbers functionality of the Link Property, the native plugin inappbrowser is required.

inappbrowser is automatically included in our Package Export, but if you're working locally, make sure it's installed by running cordova plugin add cordova-plugin-inappbrowser.

Presently, these three options will not work in Creator Mobile when testing, since Creator Mobile loads your app in an iFrame, we're working on a change for this.

Linking to an External URL

Simply choose the Link Option and specify your URL and you'll have an external link in your app. Please see the inappbrowser note above to make sure this opens in a browser and not over your Ionic application (breaking everything in the process).

Open the Email Client with an email address

Just choose the email option, then specify what email address you'd like to open in the mail client. Please see the inappbrowser note above to make sure this actually opens in your phones email client.

Open a phone number in the phones dialer

Choose the phone option, then specify the phone number you'd like to open in the dialer. Please see the inappbrowser note above to make sure this actually opens in your phones email client.

Using ui-sref in HTML Pages and the HTML Component

You can also use the ui-sref directive in HTML Pages and HTML Components to link to other pages. Please see the HTML Pages documentation for information on how to use ui-sref.

Using $state.go to Navigate in your Controller Code

You can also use $state.go in your controller code to navigate between pages. For more information on using $state.go both with and without Route Parameters, check out our Route Parameters documentation.

Navigation & Special Links