ClassList.toggle() не работает IE11 Angular 7 (недопустимый вызывающий объект)

Попробуйте выполнить тест с приведенным ниже кодом, который может помочь вам решить вашу проблему.

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>

Кроме того, вы можете попробовать изменить код в соответствии с вашими требованиями.

попробуйте использовать Renderer2 для управления элементами dom вместе с ElementRef и ViewChild, как упоминалось ранее.

первый импорт ViewChild, ElementRef и Renderer2

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

получить элемент, используя ViewChild типа ElementRef после того, как вы сделали ссылки на шаблоны в своей DOM, например

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

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

и делайте свои вещи с помощью функции hamburgerClick

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

или вы можете просто использовать [ngClass] (не знаю, почему вы не используете это вместо этого) надеюсь это поможет

также не забудьте добавить рендер в свой конструктор

contructor(private renderer: Renderer2){}

Обновлено: вот реализация [ngClass]

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

а затем просто используйте функцию для переключения

 hamClick: boolean

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

ну вот