Angular 6 to cant add java script correctly

Question

Im used my university ty project for angular6 and ng bootstrapand Im try to implement this Sidenav for my project but its cant do add correctly .any one know how to add correctly my project

facilitistatus.component.html

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" (click)="open(closeNav)">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" (click)="open(openNav)">&#9776; open</span>

facilitistatus.component.ts

 open(openNav) {
    document.getElementById('mySidenav').style.width = '250px';
  }

  open(closeNav) {
    document.getElementById('mySidenav').style.width = '0';
  }

facilitistatus.component.css

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

I got the following error

ERROR in src/app/facilitistatus/facilitistatus.component.ts(33,11): error TS2393: Duplicate function implementation. src/app/facilitistatus/facilitistatus.component.ts(44,3): error TS2393: Duplicate function implementation. src/app/facilitistatus/facilitistatus.component.ts(50,3): error TS2393: Duplicate function implementation. src/app/facilitistatus/facilitistatus.component.ts(61,11): error TS2393: Duplicate function implementation. src/app/facilitistatus/facilitistatus.component.ts(75,5): error TS2393: Duplicate function implementation. src/app/facilitistatus/facilitistatus.component.ts(79,3): error TS2393: Duplicate function implementation.

Answer 1

Error message spells it out: duplicate function. Javascript does not have function overloading. Instead, your methods need different names.

openNav() {
  document.getElementById('mySidenav').style.width = '250px';
}

closeNav() {
  document.getElementById('mySidenav').style.width = '0';
}

Answer 2

As i can see in src/app/facilitistatus/facilitistatus.component.ts

**open(openNav)** {
    document.getElementById('mySidenav').style.width = '250px';
  }

  **open(closeNav)** {
    document.getElementById('mySidenav').style.width = '0';
  }

**Modification needed

1) Rename methods to

**openNav()** {
    document.getElementById('mySidenav').style.width = '250px';
  }

  **closeNav()** {
    document.getElementById('mySidenav').style.width = '0';
  }

the use similar in .html binding.

2) Use DOCUMENT from @angular/common as a service and then play with javascript. Refer Link for DOCUMENT adding

[How to inject Document in Angular 2 service ]

Answer 3

Instead of resizing div's width from 0 to 250px, you should try keeping the width 250px, and when in closed mode give it a transform:transalteX(-250px), and in open mode, provide it translateX(0) In both open and close case provide add a different class to identify the mode.

// By Default, close mode
.sidenav {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    transform : translateX(-250px);
}

// Open mode
.sidenav.open {
    transform : translateX(0);
}

This was for opening and closing side-nav, and yes method overloading issue has been resolved in other answers. And use this handleNav method with boolean variable

handleNav(isOpen: boolean) {
  document.getElementById('mySidenav').classList.remove('open');
  if(isOpen)
  document.getElementById('mySidenav').classList.add('open');
}