How to pass changing value getting in index.html function to same project component in angular 4

Question

#index.html

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>MyTest</title>
      <base href="/">

      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script>
        function myFunction() {
          var count = 0;
          setInterval(function(){ count++ }, 3000);
        }
      </script>
    </head>
    <body>
      <app-root></app-root>
    </body>
    </html>

How to pass changing count value from index.html to app.component which is in same angular 4 project. How to we detect value change in index.html.

Show us some of the code. We're not wizards. Also please take the [tour](https://stackoverflow.com/tour) — Alex Ironside, Jul 23 '18 at 11:31

score 0 · Answer 1 · answered Jul 23 '18 at 12:34

0

<html>
  <input type = "text" [(ngModel)] = "myval" (ngModelChange) = "updateFunction()">
</html>

updateFunction(){
this.commonmyval.next(this.myval);
} //same component

Write a service and use that service in every component where you want to see the change

//In commonservice.ts

this.commonmyval = new Subject<any>();

OtherComponent Where you want the changes of myval

this.commonservice.commonmyval.subscribe(data => {localvariable = data;})

answered Jul 23 '18 at 12:34

sairohith

272
2
9

We can use ngmodel in index.html. – prats Jul 23 '18 at 12:38
I don't think we can use(May be it is not in any component?). You can create another component and use the same code I guess. Write down the same function in component and call it on ngOnInit and associate the count to whatever variable you need. That should work – sairohith Jul 23 '18 at 12:48
I have some function which run only in index.html that's the reason to access value from index.html to component. It's similar to the function which i mention in my code example. – prats Jul 24 '18 at 05:13
Please check my new answer – sairohith Jul 24 '18 at 05:58
I got solution for this https://stackoverflow.com/questions/35276291/how-to-expose-angular-2-methods-publicly/35276652#35276652 – prats Jul 25 '18 at 12:30

score 0 · Answer 2 · answered Jul 24 '18 at 05:44

<div id = "dummy" style="display:none"> </div>

Use this template in index.html. Update this element with

$("#dummy").html(count).

Extract the value from the same dummy element.

othecomponetval = $("#dummy").html()//This should always have the updated value of count.

How to pass changing value getting in index.html function to same project component in angular 4

2 Answers2