Good time,

Does Angular2 have the ability to manipulate the DOM tree?

Task: a simple drop-down menu, when you click on a menu item, a submenu drops out; when you click again, it disappears.

  • Paragraph 1
    • Clause 1.1
    • Subparagraph 1.2
    • Clause 1.3
  • Point 2
    • Clause 2.1
    • Clause 2.2
    • Subparagraph 2.3
  • Point 3
    • Subclause 3.1
    • Subparagraph 3.2
    • Subparagraph 3.3

I wanted to do it according to the principle - click -> we are looking for a child submenu -> manipulate. But I can not figure out how to do it in an angular.

There is also the ngIf directive, probably in this direction, and you need to think, but again I can not figure out how I can set the display condition for each specific submenu (and not common to all).

Thanks for answers!

    1 answer 1

    There is a possibility, but it should be used only in extreme cases, since Almost everything can and should be done as prescribed by the framework ideology - through templates, data binding and events, otherwise it is not clear why you need an angular. ElementRef

    For the menu is quite a simple template:

    <ul> <li *ngFor="let item of items;let i = index" (click)="show[i]=!show[i]"> {{item.name}} <ul [hidden]="!show[i]"> <li *ngFor="let subitem of item.children"> {{subitem.name}} </li> </ul> </li> </ul>
    • one
      Thank! Exactly what you need! Alas, she did not realize :( - Furry Cat