Multilevel Dropdown (or datepicker popup over a dropdown) in Angular 2

I want to add the ng2-bootstrap’s date picker popup on top of a dropdown div that I created. When that did not work I tried to just create a simple multilevel dropdown to begin with. Eventually I want date picker popup to show up when clicked on the dropdown I have. Can you help please. Here is my code.

I am new to the community. Please let me know if I missed any information that should have been included.

import {Component} from 'angular2/core';
import {DROPDOWN_DIRECTIVES, DATEPICKER_DIRECTIVES} from "ng2-bootstrap/ng2-bootstrap";

@Component({
selector: 'multilevel-dropdown',
template: `
    <div>
        <div dropdown [autoClose]="'disabled'">
            <div dropdownToggle id="TopLine" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <H1>Today's date is: {{dt | date:'short'}} (click date for pop-up)<b class="caret"></b></H1>
            </div>

            <div class="dropdown-menu">
                <div class="dropdown dropdown-submenu">
                    <div id="FirstPopup" class="dropdown-toggle" data-toggle="dropdown" aria-labelledby="TopLine" aria-expanded="false">
                        <H3>First Popup (implemented as dropdown) (click this text for next popup)<b class="caret"></b></H3>

                        <!--Following should be replaced with the div commented later for datepicker popup-->
                        <div class="dropdown-menu">
                            <div class="dropdown dropdown-submenu">
                                <div id="SecondPopup" class="dropdown-toggle" data-toggle="dropdown" aria-labelledby="FirstPopup" aria-expanded="false">
                                    <H5>Second Popup (implemented as dropdown)</H5>
                                </div>
                            </div>
                        </div>

                        <!--<div id="SecondPopup" class="dropdown-menu  dropdown-menu-right" aria-labelledby="FirstPopup">-->
                            <!--<datepicker [(ngModel)]="dt" [showWeeks]="false"></datepicker>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
`,
directives: [DROPDOWN_DIRECTIVES, DATEPICKER_DIRECTIVES]
})

export class MultilevelDropdownComponent {
public dt:Date= new Date();
}

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

Found the fix. The issue was that each time a dropdown (at any level) is clicked, the event is propagated up the DOM and the dropdown-toggle toggles the open dropdown. In order for multilevel-dropdown to work, I needed to capture the event and stop propagation based on if I am opening the next level of dropdown or closing an existing one.