classList.toggle() not working IE11 Angular 7 (Invalid Calling Object)

Question

I've just been testing my app on IE11 and I cant figure out why this isn't working,

I have this code it has three elements .hamburger-small, .hamburger-big and .menu

<div [class.shown]="!chatbarFullscreen">
        <div [class.disabled]="router.url.includes('home')">
            <img (click)="closeChatbar(true, router.url.includes('home') ? true : false)" *ngIf="chatbarFullscreen" src="../assets/images/whole-app/arrow-right.svg" alt="Arrow Right">
            <img (click)="closeChatbar(false, router.url.includes('home') ? true : false)" *ngIf="!chatbarFullscreen" src="../assets/images/whole-app/arrow-left.svg" alt="Arrow Left">
        </div>
        <img (click)="goHome()" src="../assets/images/chatbar/header-logo.svg" alt="header logo">
        <div id="small" (click)="hamburgerClick()" class="hamburger hamburger--slider hamburger-small">
            <div class="hamburger-box">
              <div class="hamburger-inner"></div>
            </div>
        </div>
    </div>
    <div id="big" (click)="hamburgerClick()" class="hamburger hamburger--slider hamburger-big">
        <div class="hamburger-box">
          <div class="hamburger-inner"></div>
        </div>
    </div>
    <div class="menu">
        <p (click)="closeChatbar(false); hamburgerClick();" [routerLink]="['/app/main/home']">Home</p>
    </div>
</div>

and when you click it, it calls this function

hamburgerClick() {
    const small = <HTMLElement>document.querySelector('.hamburger-small');
    const big = <HTMLElement>document.querySelector('.hamburger-big');
    const menu = <HTMLElement>document.querySelector('.menu');
    small.classList.toggle('is-active');
    big.classList.toggle('is-active');
    menu.classList.toggle('show');
}

now It works on every other browser, Chrome, Firefox, Safari and Edge but not in IE I've seen similar questions but it seems as if it should work? I'm also getting this error in the console when I click the button for the first time, but it does not happen any other time

any help would be great..

EDIT

I have tried using @ViewChild() but it still isn't working, however the Invalid Calling Object error is no longer happening

@ViewChild('hamburgerBig') hamburgerBig: ElementRef;
@ViewChild('hamburgerSmall') hamburgerSmall: ElementRef;
@ViewChild('menu') menu: ElementRef;

hamburgerClick() {
    this.hamburgerBig.nativeElement.classList.toggle('is-active');
    this.hamburgerSmall.nativeElement.classList.toggle('is-active');
    this.menu.nativeElement.classList.toggle('show');
}

Thanks!!

You can query the element in angular using ViewChild Check this Doc:https://angular.io/api/core/ViewChild — Chellappan வ, Mar 13 '19 at 05:45
https://stackoverflow.com/questions/38944725/how-to-get-dom-element-in-angular-2 — Chellappan வ, Mar 13 '19 at 05:47
can you please add HTML with class '.hamburger-small' and '.menu', if this is not defined on page, this is the issue — Bhavin Solanki, Mar 13 '19 at 05:50
@BhavinSolanki I have added my full code, but it works on every other browser dont see how If I was missing the elements it would work anywhere else — Smokey Dawson, Mar 13 '19 at 05:57
you need to place template ref on the element when using ViewChild — Chellappan வ, Mar 13 '19 at 06:03

Rogelio · Accepted Answer · 2019-03-14T04:27:17.363

try using Renderer2 to manipulate dom elements along with ElementRef and ViewChild as other previously mentioned.

first import ViewChild, ElementRef and Renderer2

import { Renderer2, ElementRef, ViewChild } from '@angular/core';

get the Element using ViewChild of type ElementRef after you've made template references in your DOM, like

<div #hamburgerBig></div>
<div #hamburgerSmall></div>
<div #menu></div>

@ViewChild('hamburgerBig') hamburgerBig: ElementRef;
@ViewChild('hamburgerSmall') hamburgerSmall: ElementRef;
@ViewChild('menu') menu: ElementRef;

and do your stuff with your hamburgerClick function

hamburgerClick() {
    const hamBigIsActive = this.hamburgerBig.nativeElement.classList.contains('is-active');
    const hamSmallIsActive = this.hamburgerSmall.nativeElement.classList.contains('is-active');
    const menuShow = this.menu.nativeElement.classList.contains('show');

    if(hamBigIsActive) {
     this.renderer.removeClass(this.hamburgerBig.nativeElement, 'is-active');
    } else {
      this.renderer.addClass(this.hamburgerBig.nativeElement, 'is-active');
    }
    if(hamSmallIsActive) {
     this.renderer.removeClass(this.hamburgerSmall.nativeElement, 'is-active');
    } else {
      this.renderer.addClass(this.hamburgerSmall.nativeElement, 'is-active');
    }
    if(hamSmallIsActive) {
      this.renderer.removeClass(this.menu.nativeElement, 'show');
    } else {
      this.renderer.addClass(this.menu.nativeElement, 'show');
    }
}

or you could just simply use [ngClass](not sure why you aren't using this instead) hope this helps

also dont forget to add render to your contructor

contructor(private renderer: Renderer2){}

Edit: here's the [ngClass] implementation

<div id="small" 
(click)="hamburgerClick()"
[ngClass] = "{'is-active' : hamClick}"
class="hamburger hamburger-- 
slider hamburger-small">
        <div class="hamburger-box">
          <div class="hamburger-inner"></div>
        </div>
</div>
<div id="big" 
(click)="hamburgerClick()"
[ngClass] = "{'is-active' : hamClick}"
class="hamburger hamburger--slider 
 hamburger-big">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
</div>
<div 
[ngClass] = "{'show' : hamClick}"
class="menu">
    <p (click)="closeChatbar(false); hamburgerClick();" [routerLink]=" 
    ['/app/main/home']">Home</p>
</div>

and then just use a function to switch

 hamClick: boolean

 hamburgerClick(){
   this.hamClick = !this.hamClick;
 }

there you go

Hey! I used `[ngClass]` and it worked! I didnt even think of that, if you edit your question to include the solution with `[ngClass]` I will mark as correct! — Smokey Dawson, Mar 13 '19 at 22:16

score 0 · Answer 2 · answered Mar 13 '19 at 06:22

Try to make a test with code below may help you to solve your issue.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public show:boolean = false;
  public buttonName:any = 'Show';

  ngOnInit () {  }

  toggle() {
    this.show = !this.show;

    // CHANGE THE NAME OF THE BUTTON.
    if(this.show)  
      this.buttonName = "Hide";
    else
      this.buttonName = "Show";
  }
}

.is-active{color:green;
}

<button (click)="toggle()" id="bt">
    Hide
</button>

<ng-container *ngIf="show">
    <div style="margin: 0 auto;text-align: left;">
        <div>
            <label>Name:</label>
            <div><input id="tbname" name="yourname" /></div>
        </div>
        <div>
            <label>Email Address:</label>
            <div><input name="email" id="email" /></div></div>
        <div>
            <label>Additional Information (optional):</label>
            <div><textarea rows="5" cols="46"></textarea></div>
        </div>
    </div>
</ng-container>

Further, You can try to modify the code based on your requirement.

classList.toggle() not working IE11 Angular 7 (Invalid Calling Object)

2 Answers2