title: Routing the dropdown option in angular2
body: <p>i have created a dropdown list for 4 option as..</p>
  
  <p><a href="https://i.stack.imgur.com/ZLdul.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZLdul.png" alt="This is my Dropdown list "></a></p>
  
  <p>I have to route this option such as when i click the option A then it should route to <strong><code>A.ts</code></strong> and same for the B to B.ts C to C.ts  and D to D.ts</p>
  
  <pre><code>My app.ts 
  import {bootstrap}  from 'angular2/platform/browser';
  import {Component} from 'angular2/core';
  import {NGL_DIRECTIVES, provideNglConfig} from 'ng-lightning/ng-lightning';
  import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
  
  
  @Component({
    selector: 'my-app',
    directives: [NGL_DIRECTIVES],
    templateUrl: 'app/angular-2-menu.html',
  
  
  })
  export class Angular2Menu {
  
   open: boolean;
    picks: any[] = [];
  
    items = [
      { value: 'A' },
      { value: 'B' },
      { value: 'C' },
      { value: 'D' },
    ];
  
    onToggle($event: Event) {
      $event.stopPropagation();
      this.open = true;
    }
  
  }
  
  bootstrap(Angular2Menu, [provideNglConfig()]);
  </code></pre>
  
  <p>and
  app/angular-2-menu.html as</p>
  
  <pre><code>and my--&gt; **app/angular-2-menu.html**
  
  
  &lt;div style="padding-left:10px;padding-top:10px"&gt;
  &lt;div class="slds-text-heading--label slds-m-bottom--small"&gt;Angular 2 Dropdown Menu&lt;/div&gt;
  &lt;span nglDropdown [(open)]="open"&gt;
    &lt;button class="slds-button slds-button--neutral" nglDropdownTrigger&gt;
      &lt;span class="slds-truncate"&gt;Select an item&lt;/span&gt;
      &lt;ngl-icon icon="down" size="x-small"&gt;&lt;/ngl-icon&gt;
    &lt;/button&gt;
    &lt;div class="slds-dropdown slds-dropdown--left"&gt;
      &lt;ul class="dropdown__list" role="menu"&gt;
        &lt;li class="slds-dropdown__item" *ngFor="#item of items;"&gt;
          &lt;a role="menuitem" nglDropdownItem (click)="selected = item.value; open = false;"&gt;
            &lt;p class="slds-truncate"&gt;{{item.value}}&lt;/p&gt;
            &lt;ngl-icon [icon]="item.icon" size="x-small"&gt;&lt;/ngl-icon&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>Please guide me with that.. </p>