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.

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.