How to pass a value from index.html page to component.ts file in angular 4
Question
Hello I am new to Angular, How can I connect my Index.html file to component.ts? Please check my code below. I have created a function named scannerOutput in my angular index.html file. The function is working fine. But this function is difficult to send to component.ts.
Here is my INDEX.HTML
........
<script>
.......
function scannerOutput(s) {
alert(s);
}
</script>
</head>
I think another method when directly calling the function to component.ts could not get the value so I chose to call the index page and then get it.
Here in the alert "s" will show the value and I want to pass the "s" value to my component.ts file.
Here I try to connect the call directly to the component.ts file:
scannerOutput() {
scannerOutput();
function scannerOutput() { // function definition
if (typeof Android !== "undefined" && Android !== null) {
alert("2nd scan start");
//console.log("function 1called")
}
alert("2nd scan stop");
console.log("function 3called")
}
scannerOutput()
But it does not work. Here I use an android device to scan an item and sent the value to here but could not pass the value to component.ts so I chose index.html. Now I get the value in index.html, my problem is that I want to transfer that value to the component.ts file.
3 answers
solution1
0 2019-04-03 05:41:05
You have to add your app components selector to the index.HTML file. Do this by locating your app components. ts folder. There is a selector property at the @components() method. Copy this to the body of your index.html file. For example if the selector name is app-root. should be added to the index.HTML.
solution2
0 2019-04-03 05:49:33
By default index.html is the default html page called in Angular, inside the index.html loading - which is app.component.html is called.
For Ex : app.component.html is having content
Welcome to App component
, when index.html is called - in the browser its displayed as Welcome to App componentBy concluding this you can have you values to app.component.html from app.component.ts its directly displayed in index.html
FOr passing the value from ts to Html content by "interpolation" for ex : you having variable name="myname" in the ts class, in the html you can use
{{name}}
where html and ts resided in same component.dont forget to upvote if its works for you.
solution3
0 2019-04-03 06:09:39
Usually in Angular you do not add code to your index.html. When you create a project using the angular cli you get html that contains this code:
<body class="cui">
<div class="content-fluid">
<main>
<app-root></app-root>
</main>
</div>
</body>
The app-root selector "connects" your index.html to your app-component component. In the app-component you should find 4 files:
- app-component.ts - here is where your function should be
- app-component.html - this is the html that will be docked into the index where the selector is
- app-component.css - this will contain the styling for your component
- app-component.spec.ts - this is a place holder for your test.
So, your function is in the app-component.ts and from here you have several ways to call it and it depends on when/how you want it to run, I think that you should run it as a callback from your html, as a response to some event: so in your html file you should have:
<button (click)="yourFunction($event)">
and in your ts file you should have:
yourFunction(arg: any): void {
...
}
In order to scale your code you should create more components and put your logic in there and not in the app-component.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.