Using Typescript to Toggle a Side Navigation (Sidenav)

Seeking assistance with implementing a toggle button for a side navbar in Angular and Typescript

Nav

<nav *ngIf="nav.visible" class="sidebar col-xs-12 col-sm-4 col-lg-3 col-xl-2 bg-faded sidebar-style-1 sidenav pt-3 mt-1 pr-0 pl-0">
<ul class="nav nav-pills flex-column sidebar-nav navcss">
  <li class="nav-item"><a routerLink="/home" class="nav-link  h7 pb-2 pr-0" routerLinkActive="active"
                          [routerLinkActiveOptions]="{exact:true}"><em class="fa fa-home mr-2"></em> Home </a></li>
  <li class="nav-item"><a routerLink="/profile" class="nav-link  h7 pb-2 pr-0"><em class="fa fa-desktop mr-2 "></em> Profile</a>
  </li>
  <li class="nav-item"><a routerLink="/dob" class="nav-link  h7 pb-2 pr-0"><em class="fa fa-calendar-o mr-2"></em><span
    class="sr-only">(current)</span> DOB</a></li>
</ul>
</nav>
javascriptangulartypescriptangular2-forms

Answer №1

const toggleMenu = () => {
    document.getElementById("menu-toggle").addEventListener('click', (e) => {
        e.preventDefault();
        document.getElementById("wrapper").classList.toggle("toggled");
    });
}

toggleMenu();

This code has been converted to TypeScript for better type-checking and error prevention.

(Yes, it may look the same but using TypeScript adds an extra layer of robustness to your code.)

If you're interested in showing/hiding elements based on screen size in Angular, check out this helpful resource: Angularjs hide and show according to screen size responsive

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Handling image errors in jQuery for responsive design queries

Images on my website change based on the screen size using media queries. I am looking for a way to handle errors that may occur using jQuery. I want to display a text message if the image fails to load. Here is the code I have so far: <div class="con ...

javascriptjqueryhtmlcsstwitter-bootstrap

Passing variables to the ajax.done() function from within a loop - what you need to know

How can I pass a variable to the .done() method of an ajax call that is inside a loop? The code snippet below shows my initial attempt: <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </ ...

javascriptjqueryajaxasynchronous

What is the best way to update JSON data using JQuery?

I apologize for posing a seemingly simple query, but my understanding of JavaScript and JQuery is still in its early stages. The predicament I currently face involves retrieving JSON data from an external server where the information undergoes frequent ch ...

phpjavascriptjqueryhtmljson

Implement scroll bar functionality on canvas following the initial loading phase

I am currently working with canvas and I need to implement a scroll bar only when it is necessary. Initially, when the page loads, there isn't enough content to require a scroll bar. My project involves creating a binary search tree visualizer where u ...

javascriptcsshtml5-canvasoverflowp5.js

Using JavaScript to manage form input values in React

I am currently coding a basic application using NextJS and bulma CSS. The snippet below shows the form I am working on: const MyPage = () =>{ const [firstName, setFirstName] = useState('') const [secondName, setSecondName] = useState('&ap ...

javascriptreactjsnext.jsbulma

Avoiding code duplication in Angular: tips for optimizing functions

Is there a way to avoid repeating the same for loop for a second variable and use only one? I'm trying to apply the "Don't repeat yourself" method here. Should I consider using an array? JS: var app=angular.module('xpCalc', []); app.c ...

javascripthtmlangularjsfunctiondry

Enhance local rotation of objects in Three.js

I am working on creating a spaceship-like object with controls, and I have learned that I need to use quaternions to achieve this. To start, I am attempting to make a cube rotate to the left when the A key is pressed. Here is the code I have written for th ...

javascriptthree.jsrotationquaternions

How to assign a preset value to a text area in AngularJS

While working with PHP and AngularJS, I have a requirement to specify the default value for a textarea. I prefer not to utilize ng-init="textarea = ''" as the data to populate is extensive. Similarly, I want to avoid using AJAX to prevent additi ...

javascriptphpjqueryangularjs

Leveraging Angular2's observable stream in combination with *ngFor

Below is the code snippet I am working with: objs = [] getObjs() { let counter = 0 this.myService.getObjs() .map((obj) => { counter = counter > 5 ? 0 : counter; obj.col = counter; counter++; return view ...

javascriptangulartypescriptrxjs

Which specific type should be utilized for the onchange event in checkboxes?

Which type should be used for checkbox event onchange when implementing pure javascript with typescript? const checkbox = document.querySelector("#myCheckbox") as HTMLInputElement; function handleCheckboxChange(event: ChangeEvent<HTMLInputEle ...

typescript

able to move through the content without displaying the scrollbar

I am looking to keep my content able to scroll, but I don't want the scrollbar to be visible. I have written my CSS like this: #content-three{ width:100%; height:100%; position:relative; overflow:hidden; } .block_s{ width:90%; ...

javascriptjqueryhtmlcss

Vue.js is encountering an issue with receiving the accurate return value from a POST function

I am facing an issue where I am unable to receive the full data that is being sent from the frontend to the backend. Here is an example of the data structure that I am sending: { _id: 64a8a8e9903039edb52ccc4c, productName: 'Vial 2ml(US) Type1&apos ...

javascriptnode.jsvue.js

Using a JavaScript variable within an Angular component: a step-by-step guide

I am currently working with some javascript code for mapbox in my .ts file within an angular component. My goal is to access a variable called polygonCoordinates[] from the javascript code and use it in my typescript code. Unfortunately, I'm facing di ...

javascriptangular

Switching up the default font style within TinyMCE

After successfully changing the default font within the editor using the guidelines provided here, I have encountered a new issue. The original default font no longer appears in the font drop-down list. The previous default font was Verdana, and the new d ...

javascriptcssfontstinymcefont-face

I am looking to create an extension that can automatically paste text from a variety of lists, but unfortunately, I am struggling to get it up and running correctly

I'm having trouble pasting text into text boxes or documents. I've tried various methods, but nothing seems to work. Am I missing something? Is there a solution or could I get some assistance? manifest.json { "manifest_version": 3, ...

javascripthtml

show button after the page has finished loading

I have a button similar to this: <input type="submit" id="product_197_submit_button" class="wpsc_buy_button" name="Buy" value="Add To Cart"> However, I am encountering an issue where if the user clicks the button before all scripts are loaded, an e ...

javascriptjquery

ES6: utilizing properties and methods of a subclass that inherit from the superclass

While ES6 does not have abstract methods or properties, is it possible to access some methods or properties from the parent class in an inherited class? class ParentClass { constructor(){ ParentClass.checkChildPropertyAccessibility(); Pa ...

javascriptecmascript-6

Exploring the capabilities of Angular and Django Rest Framework applications

Imagine having a front-end application built in React and a back-end application developed using Node.js with Express. The back end has been thoroughly tested with Mocha, and now it's time to create functional tests for the front end. However, since t ...

djangoangularseleniumdjango-rest-frameworkpytest

Utilize AJAX to update the quantity

I have attempted to update the rows in a table using AJAX, and it works for the first row but not for subsequent rows. Can someone assist me in implementing this functionality with AJAX for multiple rows? Here is an example code snippet from cart.php: &l ...

javascriptphpjqueryajax

Utilizing React Hooks to insert components into a div

I am in the process of creating a todo list using React and realized that states are used in React instead of innerHTML or appendChild() in JavaScript. My challenge lies here: When a user clicks on a button, a simple todo should be added to the parent div ...

javascriptreactjsreact-hooks