sending variable from index.html to app.component.ts

Question

Can i send a variable from index.html to app.component.ts i have this script in index.html and i want to send url which is variable before removing query params to app.component.ts

  <script type="text/javascript">
        var url = window.location.toString();
       if(url.indexOf("?") > 0) {
          var sanitizedUrl = url.substring(0, url.indexOf("?"));
          window.history.replaceState({}, document.title, sanitizedUrl);
        }
      </script>

Answer 1

Of course you can. I made a small demo to show you how.

1. All you have to do is wrap your code as you did in index.html.
2. You have to declare the variable. You can do it inside the component as

import { Component } from '@angular/core';

// notice that foo is inited in index.html
declare var foo;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

or in typings.d.ts. I recommend declaring it in typings.d.ts. If you're using angular-cli, and i assume, it is located in src/app/typings.d.ts.

declare var foo: any;

And that's it. You can use your variable anywhere in the app.

Answer 2

Inside .html file -->

<script>
   const baseUrl = "http://0.0.0.0/";
</script>

in .ts file just declare the variable and use it -->

declare var baseUrl;
export const BASE_URL = baseUrl;