I have a side bar and I want its children to appear when the user clicks on the parent. For example, clicking on LinkTest should display its corresponding content as block. You can check out the Angular and Typescript code snippet at this link: http://jsfiddle.net/2dwvLg9u/
<nav appMenu class="navmenu navmenu-default" role="navigation">
<ul class="nav navmenu-nav">
<li class="active"><a href="#">Link</a></li>
<li #testElem><a href="#">LinkTest</a>
<ul class="hidden" #testElem1>
<li><a href="#">Link1</a></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link1</a></li>
</ul>
</li>
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
Here is the typescript code:
import { Directive, Renderer2, OnInit, ElementRef, HostListener, HostBinding, Input, ViewChild } from '@angular/core';
@Directive({
selector: '[appMenu]'
})
export class MenuDirective implements OnInit{
constructor(private renderer: Renderer2) { }
ngOnInit(){
}
@ViewChild('testElem') elRef:ElementRef;
@HostListener('click') click(eventData: Event) {
this.renderer.setStyle(this.elRef.nativeElement, 'display', 'block');
}
}