jQuery-Code muss in Vanille übersetzen, so dass ich in Angular verwenden kann

Question

Ich habe diesen Code auf einer Vorlage und ich übertrage den Code auf Angular 4, aber es mag nicht die $ on jquery, also brauche ich einen Weg zu entweder in der Lage sein, es auf Angular 4 zu verwenden oder es einfach in pure js zu übersetzen, damit ich es verwenden kann.

Hier ist der Code:

$('#toggle-btn').on('click', function (e) { 

     e.preventDefault(); 

     if ($(window).outerWidth() > 1194) { 
      $('nav.side-navbar').toggleClass('shrink'); 
      $('.page').toggleClass('active'); 
     } else { 
      $('nav.side-navbar').toggleClass('show-sm'); 
      $('.page').toggleClass('active-sm'); 
     } 
     }); 

Wie kann ich dies tun?

Answer 1

, wie selbige in vanillaJS zu tun.

function toggle(elements, className){ 
    Object.keys(elements).forEach(element => elements[element].classList.toggle(className)) 
} 

function handleClick(e){ 
    e.preventDefault(); 
    if (window.outerWidth > 1194) { 
     toggle(document.querySelectorAll('nav.side-navbar'), 'shrink'); 
     toggle(document.getElementsByClassName('page'), 'active'); 
    } else { 
     toggle(document.querySelectorAll('nav.side-navbar'), 'show-sm'); 
     toggle(document.getElementsByClassName('page'), 'active-sm'); 
    } 
} 

document.getElementById('toggle-btn').addEventListener('click', handleClick); 

Answer 2

Ohne Zugabe des jQuery-Paket:

declare var $: any;

und wenn Sie Typoskript Definition müssen dann dieses Paket auf Ihren package.json hinzufügen

"@ Typen/jquery": "^ 2.0.45",