Link to home
Start Free TrialLog in
Avatar of Stefan Motz
Stefan MotzFlag for United States of America

asked on

JavaScript not working in Angular

Hi Experts,
I'm trying to make a simple JavaScript page work with Angular, but I don't get the same results as in my browser when I open it from Notepad.
This is the code of the page, working fine when I display it in the browser:
<html>
<head>
  <script>
  function display()
  {
  document.getElementById("errorLabel1").innerHTML = document.getElementById("searchBox").value; 
  document.getElementById("searchBox").value = "";
  }
  </script>
</head>

<body>
  <input type="text" id="searchBox">
  <input type="button" value="Submit" id="mySearch" onClick="display()"/>

You typed: <div id="errorLabel1"></div>
  
</body>
</html>

Open in new window

In Angular I paste this code in the app.component.html:
User generated imageIt won't return any results after I do ng serve
Do I need additional imports in the app.component.ts file in order to make it work? Right now it only has one import:
User generated imagePlease let me know what I am missing. Thank you very much in advance!
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
While technically you can do what you are doing it is not the right way of doing it.

To answer your question we need to know what you are trying to do. Angular is very powerful so we can solve this in different ways. For instance we can use two way binding to link the output to the input as you type - the data in the output is updated.
Or we can do it as you have it which is to update the data onclick.

Here are two ways of doing two way binding
Binding to a model value
<input name="sb" [(ngModel)]="name">
<div>Result {{name}}</div>

Open in new window

Binding to a template value - this does not require the FormsModule
<input #name2 (keyup)="true">
<div>{{name2.value}}</div>

Open in new window

In the template approach we set the keyup event to true to force Angular to do a change cycle as we type. If we removed this then the the <div> would only update after we blurred away from the input element.

If you specifically want to do it on a click event then you would do something like this
Template version
<input #name3>
<input type="button" (click)="display = name3.value" value="Set Value">
<div *ngIf="display">{{display}}</div>

Open in new window

Or if you want to use the forms approach
<input [(ngModel)]="name">
<input type="button" (click)="display = name" value="Set Value">
<div *ngIf="display">{{display}}</div>

Open in new window


The above Forms approach uses template driven forms - it is possible to use reactive forms as well - but it would be helpful to know what it is you are wanting to achieve so we can best advise you.

Bottom line - Angular 2+ uses a completely different paradigm from the one you are used to in HTML / JavaScript - copying and pasting from one to the other is not the right way of going about it.
Avatar of Stefan Motz

ASKER

Thank you for your replies. My goal is to re-display on the page what users type in a textbox after they click the submit button.
I started learning Angular a few days ago and tried to use the form in an Angular component. I was wondering why it's not working in this format. I'm trying to make it work with your suggestions.
 I was wondering why it's not working in this format.

if you replace the app.component.html by your initial HTML, angular rip off all the html, head, body, script tag of it during compilation, check the DOM (do a right click on one of your field), you should see the result of the compilation :

User generated image
Thank you both! I learnt a lot.
you welcome