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

Issue

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.

Solution

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
        ],

Answered By - Tony Ngo