ERROR TypeError: "jit_nodeValue_3(...).toggle is not a function"

Question

I'm working on an Angular project. I wanted to add a month picker that would turn up on click of a text field at the nav bar. I'm using primeng components like <p-calendar> and <p-overlay>. Its a huge project in itself and I've to add calendar widget. So I'll show you my part of code only.

navigation.component.html

<div class="dls-menu-item" style="float: right; margin-right: 200px;">
    <input type="text" (click)="op.toggle($event)">
</div>

<p-overlayPanel #op>
  <div id="comp-render">
    <div class="all-container">
      <p>Time selection</p><br>
      <div>
        <p-calendar view="month" dateFormat="mm/yy"...></p-calendar>
      </div>
      <br>
    </div>
  </div>
</p-overlayPanel>

But the moment I click on the input field, I get this error:

My research on this error says that it is related to MD Bootstrap. But this answer is not working for me. I also tried this technique but it's not performing the way we want. And my findings says that (click)="op.toggle($event) is the root cause. Please tell me how to solve this.

Answer 1

Sorry for late reply can you try to create typings.d.ts and put this code here into it

interface JQuery<any> {
    tooltip(params: any): any;
}

Then in your tsconfig.json

"typeRoots": [
            "node_modules/@types",
            "src/typings.d.ts" // add here
        ],

Answer 2

This happens when you try to trigger the popover toggle from a non-prime element. It appears you need to add pInput to the input (or div and move the click handler) and then it will work.

<div class="dls-menu-item" style="float: right; margin-right: 200px;">
    <input type="text" (click)="op.toggle($event)" pInput><!--Add pInput-->
</div>

<p-overlayPanel #op>
  <div id="comp-render">
    <div class="all-container">
      <p>Time selection</p><br>
      <div>
        <p-calendar view="month" dateFormat="mm/yy"...></p-calendar>
      </div>
      <br>
    </div>
  </div>
</p-overlayPanel>

Answer 3

Please check that ngx-menu is imported in your module in which you are using it. Basically if you are using multiple module and if you are not importing it in the module in which you are using ngx-menu then it will throw this error. So import ngx-menu in that specific module to solve this error. :)

Answer 4

I recently encountered console error jit_nodevalue_3(...) is not a function while using Angular 7 and Mat-Menu.

The reason behind this error was the mat-menu element being declared with the same name as a click handler function I was using.

<mat-menu #onClickItem="matMenu">
  <button mat-menu-item (click)="onClickItem()">Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

Renaming the click function solved the problem.

<button mat-menu-item (click)="doSomething()">Item 1</button>

Hope this helps someone.