Using JavaScript in Angular 12

Question

I'm learning to use Angular 12 and trying to build a sidenav. I know I can use angular material, but I don't want to use the css associated with it.

I'd like to use this in my project. But can't understand how to convert the JS to be used in the angular 12 project.

I've placed the javascript in a menu.js under my assets/js folder. But can't understand how it's used with the component.js since it isn't a actual function, but a 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");
});

Have you instead considered converting this to “angular” syntax, as in using component variables in combination with directives like ngClass and similar to achieve the desired functionality? — Alexander Staroselsky
– Alexander Staroselsky, Commented Aug 4, 2021 at 15:32
Could you help me understand how to convert it? Or provide a example I can use to understand. — sgitdev83
– sgitdev83, Commented Aug 4, 2021 at 16:08
You need to make an attempt first. Use something like StackBlitz. Create an Angular application. Create some components. Create variables on the components in combination with ngClass and event binding and component interaction. You could create components for the menu and menu items, track values of open/closed, use events and input to manipulate child components, You could also try to find tutorials to help build out a menu component. — Alexander Staroselsky
– Alexander Staroselsky, Commented Aug 4, 2021 at 16:14

R. Richards · Accepted Answer · 2021-08-09 22:34:20Z

2

Your code is old school. You need to get used to the Angular approach.

Basically what your code is doing is toggling a CSS class on an element on click. Here's how you do that in Angular:

In your HTML file:

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

In your .ts file:

showSidebar = false;

toggleSidebar() {
  this.showSidebar = !this.showSidebar;
}

And then add your animation styles in your .styles file:

.sidebar {
  // styles
}

.sidebar.show-me {
  // styles
}

edited Aug 9, 2021 at 22:34

R. Richards

25.2k10 gold badges67 silver badges65 bronze badges

answered Aug 5, 2021 at 3:16

danday74

58k56 gold badges273 silver badges337 bronze badges

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

1 Comment

sgitdev83 Over a year ago

Thank you, this was the perfect example for me to understand what changes to make...

Collectives™ on Stack Overflow

Using JavaScript in Angular 12

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related