Estoy aprendiendo a usar Angular 12 y tratando de construir un sidenav. Sé que puedo usar material angular, pero no quiero usar el css asociado con él.
Me gustaría usar esto en mi proyecto. Pero no puedo entender cómo convertir el JS para usarlo en el proyecto angular 12.
Coloqué el javascript en un menu.js debajo de mi carpeta assets/js. Pero no puedo entender cómo se usa con el componente.js ya que no es una función real, sino un document.queryselectorall.
let arrow = document.querySelectorAll(".arrow"); for (var i = 0; i < arrow.length; i++) { arrow[i].addEventListener("click", (e)=>{ let arrowParent = e.target.parentElement.parentElement; //selecting main parent of arrow arrowParent.classList.toggle("showMenu"); }); } let sidebar = document.querySelector(".sidebar"); let sidebarBtn = document.querySelector(".bx-menu"); console.log(sidebarBtn); sidebarBtn.addEventListener("click", ()=>{ sidebar.classList.toggle("close"); });Su código es de la vieja escuela. Necesitas acostumbrarte al enfoque Angular.
Básicamente, lo que está haciendo su código es alternar una clase CSS en un elemento al hacer clic. Así es como lo haces en Angular:
En su archivo HTML:
<button (click)="toggleSidebar()">Toggle Sidebar</button> <!-- the show-me class is added when showSidebar is true --> <div class="sidebar" [class.show-me]="showSidebar">I am a sidebar</div>En su archivo .ts:
showSidebar = false; toggleSidebar() { this.showSidebar = !this.showSidebar; }Y luego agregue sus estilos de animación en su archivo .styles:
.sidebar { // styles } .sidebar.show-me { // styles }