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.

stealththeninja · Accepted Answer · 2018-07-18 04:39:50Z

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';
}

edited Jul 18, 2018 at 4:39

answered Jul 18, 2018 at 4:34

stealththeninja

3,8012 gold badges30 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

core114 Over a year ago

Hi Madam, I added your code , but side menu is not open ;(

stealththeninja Over a year ago

Opening the side menu sounds like a separate issue.

core114 Over a year ago

Madam, i dded your code but i got a this 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.

stealththeninja Over a year ago

Are there other duplicate functions? Lines 33, 44, 50, and 61?

core114 Over a year ago

Sorry that is my issue. now error is fixed but side nav not open

ArunRaheja · Accepted Answer · 2018-07-18 04:45:03Z

0

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 ]

answered Jul 18, 2018 at 4:45

ArunRaheja

91 bronze badge

Comments

Abhishek Kumar · Accepted Answer · 2018-07-18 05:36:52Z

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');
}

Collectives™ on Stack Overflow

Angular 6 to cant add java script correctly

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related