How to create a drop-down in side bar in now-ui dashboard

[suchetaswabhav]

Hi,

I want to create a background in sidebar of the Template --> now-ui-dashboard-angular-v1.0.0.
It says angular-v1.0.0 but it is an angular2 template.

And i want to create a drop-down. It was not available in the template (creative-tim template angular2). Kindly let me know what is the error in my code that i am not getting the drop-down. Purpose is i am trying to integrate Angular2 + and NodeJS with Neo4j application.

Code -

sidebar.component.html

     <div class="sidebar-wrapper">
     <ul class="nav">
        <li   routerLinkActive="active" 
        *ngFor="let menuItem of dashboardMenuItems" class=" nav-item nav- 
          dropdown"  appNavDropdown>
          <a class="nav-link nav-dropdown-toggle" href="#" 
             appNavDropdownToggle [routerLink]="[menuItem.path]">
              <i class="now-ui-icons {{menuItem.icon}}"></i>
              <p>{{menuItem.title}}</p>
                </a>


           <ul class="nav-dropdown-items">
           <li class="nav-item">

                <!-- System -->

             <a class="nav-link" routerLinkActive="active" 
            [routerLink]="['/dashboard']">
               <i class="fa fa-laptop"></i> System</a>
               </li>

             <!-- Interface -->

            <li class="nav-item">
             <a class="nav-link" routerLinkActive="active" 
            [routerLink]="['/dashboard']">
          <i class="fa fa-th"></i> Interface</a>
            </li>

          <!-- User -->

          <li class="nav-item">
            <a class="nav-link" routerLinkActive="active" 
              [routerLink]="['/dashboard']">
               <i class="icon-user"></i> User</a>
               </li>

            <!-- Group -->

           <li class="nav-item">
            <a class="nav-link" routerLinkActive="active" 
            [routerLink]="['/dashboard']">
          <i class="fa fa-group"></i> Group</a>
            </li>

          <!-- Role -->

          <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" 
          [routerLink]="['/dashboard']">
          <i class="fa fa-male"></i> Role</a>
           </li>

            <!-- Transaction -->

          <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" 
          [routerLink]="['/dashboard']">
          <i ></i>Transaction</a>
          </li>
          </ul>
          </li>
        </ul>
      </div>

PLease help me improve my code.

[dragosct]

Hi, @suchetaswabhav! Thank you for using our products. If you look in the navbar component there you will see that it's a drop-down component already made.

Regards,
Dragos