In Angular2, the toolbar(md-toolbar) is not loading buttons when used with a [ngSwitch]

Question

I am creating a toolbar with a menu button on it in this way:

<md-toolbar class="header">
<div class="header-wrapper m-x-30 clearfix">
  <div class="logo-container">
     <div class="logo-image align-middle">
     </div>
  </div>
  <div>
     <button>
        <div class="menu-image">
        </div>
     </button>
  </div>
 </div>
</md-toolbar>

Now when I use [ngSwitch] to lay out buttons according to type, the button is being created behind the toolbar and is not visible:

<md-toolbar class="header">
<div class="header-wrapper m-x-30 clearfix">
    <div class="logo-container">
        <div class="logo-image align-middle">
        </div>
    </div>
    <div *ngFor="let i of apptoolbar" [ngSwitch]="i.type">
        <div *ngSwitchCase="'MenuButton'">
            <button>
                <div class="menu-image">
                </div>
            </button>
        </div>
    </div>
</div>
</md-toolbar>

Answer 1

In Angular2 you can use only one structural directive on the same element. You cannot put NgFor and NgSwitch in the same element. Use ng-container to separate the two.

Change code as following:

<md-toolbar class="header">
    <div class="header-wrapper m-x-30 clearfix">
        <div class="logo-container">
            <div class="logo-image align-middle">
            </div>
        </div>
        <div *ngFor="let i of apptoolbar">
            <ng-container [ngSwitch]="i.type">
                <div *ngSwitchCase="'MenuButton'">
                    <button>
                        <div class="menu-image">
                        </div>
                    </button>
                </div>
            </ng-container>
        </div>
    </div>
</md-toolbar>