error TS2304: cannot find $ in angular 5 component

Question

I have a side-navbar in angular component which expands on click similar to this. The HTML snippet used to create the navbar is :

HTML:

As the name(openNav()) suggests, the following HTML code will expand the navbar:

<div>
    <img (click)="openNav()" src="/imagepath" id="image">
</div>

And the following HTML code will close the navbar:

<div id="mySidenav" class="sidenav">
    <ul class="navbar-nav mr-auto" id="sidenavContent">
        <li class="nav-item" id="close-btn">
            <img class="closebtn" (click)="closeNav()" id="white-cross" src="/assets/imagepath">
        </li>
        <li class="nav-item" id="close-btn">
           <p> Item 1 </p>
        </li>
        <li class="nav-item">
            <p> Item 2 </p>
        </li>

    </ul>
</div>

Typescript:

The typescript used is:

openNav() 
 {
     $("#mySidenav").css("width", "50%");   // Line A
 }

 closeNav() 
 {
    $("#mySidenav").css("width", "0%");   // Line B
 }

The above typescript code is not included in the ngOnInit() function.

Problem Statement :

As soon as I do ng serve on my command prompt, I get the following error:

error TS2304: Cannot find name '$'.

The $ represents the lines (Line A and Line B in the typescript above) inside openNav() and closeNav() functions above in the typescript.

I am wondering what are the primary reasons behind that error as sometimes I get the error and sometimes I don't while doing ng-serve.

Answer 1

This is a possible solution:

HTML:

<div>
<img (click)="openNav()" src="/imagepath" id="image">
</div>
And the following HTML code will close the navbar:

<div id="mySidenav" class="sidenav" style="{{vstyle}}">
  <ul class="navbar-nav mr-auto" id="sidenavContent">
    <li class="nav-item" id="close-btn">
      <img class="closebtn" (click)="closeNav()" id="white-cross" src="/assets/imagepath">
    </li>
    <li class="nav-item" id="close-btn">
      <p> Item 1 </p>
    </li>
    <li class="nav-item">
      <p> Item 2 </p>
    </li>

  </ul>
</div>

Typescript:

//Define a visual style variable
vstyle: = 'width:50%;';


openNav() 
 {
     vstyle = 'width:50%;';   // Line A
 }

 closeNav() 
 {
    vstyle = 'width:0%;';   // Line A
 }

Answer 2

Use style.width

<div id="mySidenav"  [style.width]="myWidthVariable+'%'" class="sidenav">
<ul class="navbar-nav mr-auto" id="sidenavContent">
    <li class="nav-item" id="close-btn">
        <img class="closebtn" (click)="closeNav()" id="white-cross" src="/assets/imagepath">
    </li>
    <li class="nav-item" id="close-btn">
       <p> Item 1 </p>
    </li>
    <li class="nav-item">
        <p> Item 2 </p>
    </li>

</ul>

And then set the value of "myWidthVariable" on your openNav() and closeNav() methods (just the number).

Answer 3

If you are using the jquery in ts file, declare $ as a variable of type any, then you won't get the error.

declare var $:any

Answer 4

I assume that $ is jQuery. You must add jQuery to your dependencies and imported it in the file where you're using it. I'd suggest also adding the type definitions for jQuery: npm install @types/jquery --save-dev

If you're importing jQuery in any other way, then just add the types.