Angular2 Ngfor click toggle doesn't work

Question

I'am working on a angular2 project, in component(html ) I have this structure:

<ul class="nav nav-list" >
                <li> 
                   <label class="tree-toggler nav-header">
                     <i class="fa fa-plus-circle" aria-hidden="true">
                        </i>Mylabel  
                   </label>
                </li>
                <ul class="nav nav-list tree">
                   <label class="groupcompte">
                     <i class="fa fa-plus-circle" aria-hidden="true">
                       </i>group_name: 
                   </label>
                   <ng-container>
                      <!-- contain of group-->
                   </ng-container>
                </ul>
</ul>

In my component(.ts) when i try the snippet code below : which is supposed hidde content of Mylabel when clicking on but nothing happen

           $('label.tree-toggler').click(function () {
             $(this).parent().children(' ul.tree').toggle(300);
             $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle')

          });

          $('label.groupcompte').click(function () {
             $(this).parent().find('tr.compte_in_groupe').toggle(300);
             $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle')

          });

what I'am doing wrong?

for toggle my DOM element I used jquery in $(function()){} include in component.ts file — kadal sparkadal, Sep 14 '17 at 10:04

score 0 · Answer 1 · answered Sep 14 '17 at 11:20

0

Not a good idea to have jQuery with angular.. Why not use the click event of the element in your template and bind it with the event handler defined in component:

<button (click)="this.handleMe()">Button</button>

Check this for better understanding on How to perform DOM manipulation in Angular components without using jQuery.

answered Sep 14 '17 at 11:20

Peter

10,492
21
82
132

1

PS: in the DOM you don't need to use `this` instead you can simply call `(click)="handleMe()"` – Pardeep Jain Sep 14 '17 at 12:38

Angular2 Ngfor click toggle doesn't work

1 Answers1