Angular 6 - Implementing a collapsible mobile menu with a click event

On my static Angular 6 page, I have tabs and I'm trying to figure out how to collapse the mobile menu when an element is clicked. I need a solution similar to the jQuery code shown below, but I can't use jQuery.

$('.navbar-nav>li>a').on('click', function() {
  $('.navbar-collapse').collapse('hide');
});

Below is my navigation menu code.

<ul class="navbar-nav w-100">
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fa fa-check mb-3"></i> Finance legal tax and HR
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fa fa-check mb-3"></i> Information technology
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fa fa-check mb-3"></i> Risk and cybersecurity
        </a>
    </li>
</ul>

Answer №1

Utilize the click-event-handler in conjunction with a component property.

export class MyComponent{
 showMenu: boolean = true;
}

Then in your HTML template:

<button (click)="showMenu = !showMenu"></button>

<ul class="navbar-nav w-100" [hidden]="showMenu">...</ul>

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

Unable to access due to permissions being denied on jQuery.form.js in Internet Explorer

What is the solution to this issue? I am encountering an access denied error in Internet Explorer on the file jquery.form.js. => if (io.contentWindow.document.execCommand) { try { // #214 io.contentWindow.document.execCommand( ...

Animating the Three.js Globe camera when a button is clicked

Struggling to create smooth camera movement between two points, trying to implement the function below. Currently working with the Globe from Chrome Experiments. function changeCountry(lat, lng) { var phi = (90 - lat) * Math.PI / 180; var theta = ...

`Creating a functional list.js filter``

I'm having trouble making the List.js filter function work properly. The documentation for List.js is not very helpful for someone new to development. Below is the code I am using: HTML: <div class="col-sm-12" id="lessons"> <input class= ...

Customizing a responsive background image within a div using Bootstrap 3

Is there a way to style the background image of my header div like the one featured on Mr. Bill Gates' website at ? I noticed that the height of Mr. Bill Gates' header background image remains consistent, even on smaller screens. I've atte ...

Developing a Five-Star Rating System Using PHP, MySQL, jQuery, and Ajax

I found an interesting tutorial on creating a 5-star rating system using PHP, MySQL, jQuery, and AJAX at . However, when I tried to implement it, I encountered the following errors: Notice: Undefined variable: rat in C:\xampp\htdocs\rating& ...

Having trouble with JavaScript/JQuery not functioning properly in HTML content loaded using the load() method

My goal is to load an input form from a separate file called new_machine.php into my index.php. This form includes an input with a dropdown that retrieves options from a MySQL database and displays them as anchors. The issue arises when I attempt to manipu ...

Unable to utilize class identifiers in TypeScript because of 'incompatible call signatures' restriction

Following the execution of relevant yarn add commands, the following lines were added to the packages.json: "@types/classnames": "^2.2.7", "classnames": "^2.2.6", Subsequently, I incorporated these lines into my typescript files: import * as classnames ...

Looking to tidy up the HTML produced by JQueryUI?

Is there a way to achieve this? I am developing a template generator that includes resizable and draggable elements within a preview window. The issue arises when I try to extract the generated HTML, as it contains unwanted JQueryUI classes and divs for ea ...

Utilize different versions of jQuery along with various plugins

I have integrated the AdminLTE Template into my project, which requires jQuery Version 3.X. Additionally, I am using the Flotchart jQuery library, which specifically needs jQuery Version 1.11.3. To handle this conflict, I have implemented the $.noConflic ...

Utilizing jQuery to dynamically resize textareas on dynamically loaded divs through AJAX

Recently, I have implemented a module that allows auto-scaling on my textareas. Initially, it worked perfectly fine. However, when I started loading new textareas via ajax, I faced an issue. Usually, switching from .click to .live('click', fn) r ...

Discovering child elements within an iframe using Angular and customizing their appearance

Is there a simple and effective way to locate child nodes within an iframe using Angular in order to access the HTML element? Currently, I have implemented the following method: I designated a reference variable within my iframe (#privacyPolicy) <ifra ...

Battle of Kingdoms API ajax

When attempting to access Clash of Clans API information in this script, the following error is encountered: Refused to execute script from 'https://api.clashofclans.com/v1/leagues?authorization=Bearer%20eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiIsImtpZCI6Ij ...

Is there a way to prompt the compiler to generate an error when a type cannot be set to `undefined`

I'm working with a type called ILoadedValue<TValue>, which acts as a wrapper for types that can potentially be undefined. However, I want to prevent situations where TValue cannot be undefined, as it's more efficient to use the actual value ...

Tips for updating TypeScript aliases during compilation

To define a typescript alias in tsconfig.json, you can use the following syntax: "paths": { "@net/*":["net/*"], "@auth/*":["auth/*"], }, After defining the alias, you can then use it in you ...

Encountered an error message while attempting to use jQuery AJAX with an XML file

data.xml <?xml version="1.0" encoding="utf-8"?> <cars> <car company="TOYOTA"> <product>Prius</product> <colors> <color>white pearl</color> <color>Red Met ...

Sending both GET and POST parameters in a single AJAX request using jQuery

Is it possible to send both GET and POST parameters in a jQuery AJAX request at the same time? I have attempted to append do=ajax&id=" + ID to the url, but the resulting request only includes sss.php without the query string (GET part). Any suggestion ...

How can I convert Typescript absolute paths to relative paths in Node.js?

Currently, I am converting TypeScript to ES5/CommonJS format. To specify a fixed root for import statements, I am utilizing TypeScript's tsconfig.json paths property. For instance, my path configuration might look like this: @example: './src/&ap ...

How to implement a form in PHP that doesn't refresh the page upon submission

I am having an issue with this ajax code. I know it works, but for some reason it's not submitting. <script type="text/javascript"> $(function(){ $('input[type=submit]').click(function(){ $.ajax({ type: "POST", ...

Illuminate the <select> within the form at the bottom

I have experimented with various combinations of Bootstrap 4's flexbox align utilities, as outlined in their documentation, but to no avail. Is there a way to ensure that the second <select> in the form below is aligned at the bottom of the row ...

When using jQuery's $.each method, you can include an if statement to

Is there a more efficient way to optimize this javascript code? I'm looking to streamline it, but can't figure out a better approach. Thank you! var sizes = []; //Dynamic array populated from button clicks in a menu above, can include [&ap ...