如何在AngularJs 2 Javascript中创建下拉菜单？

Question

如何在AngularJs 2 Javascript中创建下拉菜单？ 我看了很多教程，但只有Typescript可用。我需要它在Javascript中。请帮忙。

    (function(app) {
  app.HeaderComponent = ng.core
    .Component({
      selector: 'header',
      template:
      `<nav class="navbar navbar-default">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>                        
            </button>
            <a href="" class=" navbar-brand">
              <span class="brandname">Slant<sub>&nbsp;AngulatJS</sub></span>
            </a>  
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
              <li class="dashboarddiv">
                <a href="#" class="dashboard">&nbsp;Dashboard</a>
              </li>
              <li><a href=""></a></li>
              <li>
                <div [hidden]="submitted">
                  <form (ngSubmit)="onSubmit()" #Header="ngForm">
                    <button type="submit" [disabled]="!Header.form.valid"><span class="glyphicon glyphicon-envelope"></span></button>
                  </form>
                </div>
                <div [hidden]="!submitted">
                  <button (click)="submitted=false"><span class="glyphicon glyphicon-envelope"></span></button>
                  <h2>You submitted</h2>
                  <div class="row">
                    <div class="col-xs-3">Name</div>
                    <div class="col-xs-9  pull-left">rrr</div>
                  </div>
                  <div class="row">
                    <div class="col-xs-3">Alter Ego</div>
                    <div class="col-xs-9 pull-left">r</div>
                  </div>
                  <div class="row">
                    <div class="col-xs-3">Power</div>
                    <div class="col-xs-9 pull-left">r</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
      </nav>`
    })
    .Class({
      constructor: function() {
        this.submitted = false;
      },
      onSubmit: function() {
        this.submitted = true;
      },

    });
})(window.app || (window.app = {}));

我试过这个。但它创造了div hide和show。我想要导航栏中的下拉菜单。

This is the result of this code