Uncaught ReferenceError: <function> is not defined - InnerHTML <script> tag with Angular

Question

I have a component in Angular, the content of which is supplied by a backend that provides HTML code. I add it to the component as inner HTML. There is a and a tag in the HTML supplied. However, while I think the styles are being honoured, I am unable to call the function in the script tag.

The <script> tag:

  function ToggleDisplayMode(node) 
    {
        var tableHeader = document.getElementById(node);
        if (null != tableHeader)
        {
            var row = tableHeader.nextSibling;
            while (row != null)
            {
                if ( row.style.display != "none" ) {
                    row.style.display = "none";
                }
                else {
                    row.style.display = "";
                }
                row = row.nextSibling;
            }
        }
    }

How I am calling this function:

<a onclick="ToggleDisplayMode(<args>)"><u>show/hide</u></a>

The click doesn't work and I get the following output in the console:

> Uncaught ReferenceError: ToggleDisplayMode is not defined
>     at HTMLAnchorElement.onclick (<args>)

The function is clearly defined, so I do not understand what I am doing wrong here.

I have checked several posts on the issue, but they're JQuery based. Is this an issue with how Angular might treat inner HTML?

EDIT: The click needs to be handled by JavaScript and not Angular (because of the pecularities of this system), so ngClick or (click) will not work.

EDIT 2: Apparently, <script> tags in innerHtml don't get executed according to this post. Will have to find another way to do this then.

which version of angular are you using? and what is <args> here? — Aagam Jain
– Aagam Jain, Commented Oct 24, 2018 at 13:56
It is a design quirk, but this HTML is supplied by an SDK we have and the angular app was built on top of it later. The same HTML is used in a number of other client interfaces, so I cannot make changes there. So I cannot use ngClick — naman1901
– naman1901, Commented Oct 24, 2018 at 13:57
Angular 4 at the moment, and the <args> are basically the node ID in the HTML. See var tableHeader = document.getElementById(node); in the second line of the function. — naman1901
– naman1901, Commented Oct 24, 2018 at 13:57
If you open up the console and type ToggleDisplayMode does it return anything? If not then ToggleDisplayMode is not on the global scope — user2033671
– user2033671, Commented Oct 24, 2018 at 13:59

megabc123 · Accepted Answer · 2018-10-24 13:59:00Z

0

Angular looks for code in the component's typescript file, so I think you'd need to put the code there. You can create a service to get the code from the backend, then call the service from your typescript file and use a (click) event to call the typescript code.

answered Oct 24, 2018 at 13:59

megabc123

2102 silver badges5 bronze badges

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

3 Comments

naman1901 Over a year ago

I'm not using ngClick but simple JavaScript onclick so it shouldn't be Angular handling the clicks here.

megabc123 Over a year ago

try this? stackoverflow.com/questions/42530261/…

naman1901 Over a year ago

cannot do that because the IDs are dynamic and multiple places use the same function

Pankaj Shukla · Accepted Answer · 2018-10-24 13:59:57Z

0

You need to change your code like this:

<a (click)="ToggleDisplayMode()"><u>show/hide</u></a>

Notice that instead of onclick, you have to use (click)

answered Oct 24, 2018 at 13:59

Pankaj Shukla

2,6722 gold badges13 silver badges18 bronze badges

1 Comment

naman1901 Over a year ago

That is an Angular solution - changes at that level will not be possible as this HTML is returned by an SDK and the same response is used in other, non-Angular interfaces

Kagan Agun · Accepted Answer · 2020-08-06 07:06:12Z

Angular version 9.1.9 typescript 3.8.3

You can add a js file under assets folder

src/assets/js/child2.js

function javaChangeCreatedBy() {
    alert('Set 2 clicked');

    var i_createdby = document.getElementById('inputcreatedbyid')
    var i_value = document.getElementById('inputcreatedbyid').value;
}

Following html code shows the both approach one for angular click and one for html onclick.

src/app/first-component/first-component.component.html

<p>
    Enter Created by:<input id='inputcreatedbyid' type="text" placeholder="Enter name" [(ngModel)]=inputcreatedby>
    &nbsp;
    <button type="button" (click)="ChangeCreatedBy(inputcreatedby)">Set</button> 
    &nbsp;
    <button type="button" onclick="javaChangeCreatedBy()">Set 2</button>
</p>

src/app/first-component/first-component.component.ts

 export class FirstComponentComponent implements OnInit {
      ..
      createdby = 'My name';
      inputcreatedby='';

      ChangeCreatedBy(inputcreatedby:string){
           // var inputvalue = document.getElementById("inputcreatedby").value;
           this.createdby = inputcreatedby;
      }
 }

And finally add the script file into angular.json file

 {
    "projects": {
       "architect": {
           "build": {
              ..
              "options": {
                 ..
                 "scripts": [
                    "src/assets/js/child2.js"
                 ]
              }

However angular doesn't support passing type script parameter to java function.

Collectives™ on Stack Overflow

Uncaught ReferenceError: <function> is not defined - InnerHTML <script> tag with Angular

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Related