How to toggle multiple div's in angular 9?

Question

I found THIS solution, it works fine on static pages but for some reason doesn't work on angular.

My html code:

<div class="container-fluid" style="background-color: #f3f7fa">
    <nav class="navbar navbar-expand-lg navbar-light d-flex" >        
     <a data-toggle="#action" class="nav-item">QUICK ACTION</a>
     <a data-toggle="#basic" class="nav-item">BASIC</a>
     <a data-toggle="#notes" class="nav-item">NOTES</a>
     <a data-toggle="#deals" class="nav-item">DEALS</a>
     <a data-toggle="#reminder" class="col-auto nav-item">REMINDER</a>
    </nav>
</div>

//div's to be toggled
<div id="action" class="actions mod-row">...</div>
<div id="basic" class="actions mod-row">...</div>
<div id="notes" class="actions mod-row">...</div>
<div id="deals" class="actions mod-row">...</div>
<div id="reminder" class="actions mod-row">...</div>

CSS:

div.actions:not(#action) {
  display: none;
}

solution given in above link:

$("a[data-toggle]").on("click", function(e) {
    e.preventDefault();  // prevent navigating
    var selector = $(this).data("toggle");  // get corresponding element
    $(".actions").hide();
    $(selector).show();
 }
  );

However, using this code angular was showing error :

parameter 'e' implicitly has an 'any' type

so I modified the code to:

$("a[data-toggle]").on("click", function(e:Event) {
        e.preventDefault();  // prevent navigating
        var selector = $(this).data("toggle");  // get corresponding element
        $(".actions").hide();
        $(selector).show();
        }
      );

also tried:

 $("a[data-toggle]").on("click", function() {
        this.preventDefault();  // prevent navigating
        var selector = $(this).data("toggle");  // get corresponding element
        $(".actions").hide();
        $(selector).show();
        }
      );

And lastly I even removed the prevention navigation line of code. I am not sure if these were correct but all of these modifications removed the error but the toggle still didn't work. What am I missing?

How your html looks like? Have you tried binding event to non dynamic content (`$(document).on('a.toggle ', 'click', ...)`)? — Justinas, Nov 05 '20 at 13:21
I have looked JSFIDDLE. It's like a navigation so is routing not good? — Numichi, Nov 05 '20 at 13:23
Do you really need to use jQuery here? Angular has really well developed template system. If you don't use above code with Angular, you can edit your tags. — Michał Tkaczyk, Nov 05 '20 at 13:23
I am new to angular, so not really familiar with a lot of its stuff. Could provide any link to learn how to do this with angular templates or give an alternate solution. — muazzam, Nov 05 '20 at 13:41
@Justinas I have added my HTML component to the question. And I just tried this line too it still didn't work. — muazzam, Nov 05 '20 at 13:59
Avoid binding to CSS selectors like that using jQuery if you can. You have the `[hidden]` property on each element, which you can use to drive their hide/show. — Marc, Nov 05 '20 at 14:07

score 0 · Answer 1 · answered Nov 11 '20 at 08:24

Angular is not a static page, you can't use jQuery like you use it on a "normal" website. If you chose to use angular then you should also do everything "the angular way"

There are different ways to do this, but in short: You handle the state of your visible tabs / sections in your component by defining a click event on your a-tag:

<a href="#action" (click)="toggleNav(e)" class="nav-item">QUICK ACTION</a>

In your tabs / sections you add a condition for when this section should be handled

<div id="action" [hidden]="shownDiv != 'action'"> This div is hidden if shownDiv variable is not 'action' ... So if it's value is 'action' it will be shown </div>

In your components ts file you handle the click event and also set the shownDiv variable set in the [hidden] parameter accordingly.

toggleNav(e: Event) {
 e.preventDefault;
 this.shownDiv = e.target.href.substring(1); // href is #action, we just want action, so we remove the first character
}

you should also set the shownDiv to a sensible default value so that the tab you want opened first is shown by default, something like this:

export class TabComponent implements OnInit {
  shownDiv = 'action'; // default value

How to toggle multiple div's in angular 9?

1 Answers1