ionic 2 how to use constants variable's declare in index.html?

Question

I creating a android app in ionic 2. I declare a variable in script tag in index.html. this constant value i want to use in ionic 2 pages and providers code. i pasted my code below. thanks in advance...

index.html

    <html lang="en">
    <head>
      <title>Ionic</title>
      <meta charset="UTF-8">

      <link ios-href="build/css/app.ios.css" rel="stylesheet">
      <link md-href="build/css/app.md.css" rel="stylesheet">
      <link wp-href="build/css/app.wp.css" rel="stylesheet">  
    </head>
    <body>

      <ion-app></ion-app>

      <!-- cordova.js required for cordova apps -->
      <script src="cordova.js"></script>

      <script src="build/js/es6-shim.min.js"></script>
      <!-- Zone.js and Reflect-metadata  -->
      <script src="build/js/Reflect.js"></script>
      <script src="build/js/zone.js"></script>
      <!-- the bundle which is built from the app's source code -->
      <script src="build/js/app.bundle.js"></script>

    <script type="text/javascript">
       BASE_APP_URL="www.google.com";
    </script>
    </body>
    </html>

item-details.ts

    import {Component} from '@angular/core';
    import {NavController, NavParams} from 'ionic-angular';
    @Component({
      templateUrl: 'build/pages/item-details/item-details.html'
    })
    export class ItemDetailsPage {
      selectedItem: any;

      constructor(public navCtrl: NavController, navParams: NavParams) {
                this.selectedItem = navParams.get('item');
                console.log(BASE_APP_URL);
         <!---it gives an error that name
          Error TS2304: Cannot find    name 'BASE_APP_URL'. -->                                 
          }
        }

The proper way to do this is this one.

sebaferreras
– sebaferreras

2016-08-17 15:37:34 +00:00
Commented Aug 17, 2016 at 15:37 — sebaferreras
– sebaferreras, Commented Aug 17, 2016 at 15:37

Community · Accepted Answer · 2017-05-23 11:46:48Z

1

Even though a better way to handle static settings in an Ionic app would be the one in this post, you can make your code work by:

Including the script with your variable before the <script src="build/js/app.bundle.js"></script> because that's where you're going to use it.

Declaring that variable as part of the window object implicitly.

<!-- Your variable -->
<script type="text/javascript">
    window.BASE_APP_URL="www.google.com";
</script>

<!-- the bundle which is built from the app's source code -->
<script src="build/js/app.bundle.js"></script>

And then in your code:

import {Component} from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';
@Component({
  templateUrl: 'build/pages/item-details/item-details.html'
})
export class ItemDetailsPage {
  selectedItem: any;

  constructor(public navCtrl: NavController, navParams: NavParams) {
    this.selectedItem = navParams.get('item');
    console.log(window.BASE_APP_URL);                    
  }
}

That being said, I still recommend this approach when handling static settings in any Ionic 2 app.

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Aug 17, 2016 at 15:50

sebaferreras

44.7k11 gold badges120 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shriniwas b Over a year ago

thanks for reply @sebaferreras!! i used second approch...and it works..

Collectives™ on Stack Overflow

ionic 2 how to use constants variable's declare in index.html?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related