angular2-boiler-plate/src/app/sui/sui.navigation/sui.navigation.component.html

Angular 2 Boiler plate that integrated with WebPack, TypeScript, DatePicker, RxJs for Reactive Extensions in Java Script , Karma , Jasmine for unit testing , WebKit ,protractor e2e testing

<ul [ngStyle]="nav.style" class="{{'sui-navbar sui-hide-mobile sui-hide-tablet sui-left-align ' + nav.cssClass}}">
    <li>
        <a href="/">
            <img *ngIf="nav.brandLogoPath" src="{{nav.brandLogoPath}}">
            <span *ngIf="!nav.brandLogoPath"> {{nav.brand}} </span>
            <span *ngIf="nav.showBothBrandAndLogo">
              <img *ngIf="nav.brandLogoPath" src="{{nav.brandLogoPath}}">
              <span class="sui-margin-left sui-margin-right"> {{nav.brand}} </span>
            </span>
        </a>
    </li>
    <li *ngFor="let item of nav.links">
        <a routerLink="{{item.routerLink}}" routerLinkActive="active" title="{{item.displayName}}" class="{{item.cssClass}}" [ngStyle]="item.style">
            <i *ngIf="item.icon" class="{{item.icon}}"> </i>
            <span *ngIf="item.showBothIconText">  
                <i *ngIf="item.icon" class="{{item.icon}}"> </i> {{item.displayName}} 
            </span>
            <span *ngIf="!item.icon"> {{item.displayName}}  </span>
        </a>
    </li>
</ul>
<div class="sui-hide-desktop-xl sui-hide-desktop">
    <ul class="sui-navbar">
        <li class="sui-opennav sui-right">
            <a href="javascript:void(0); " (click)="onBarsClicked() ">☰</a>
        </li>
    </ul>
</div>
<ul *ngIf="showSmallMenu" [ngStyle]="nav.style" class="{{'sui-navbar sui-left-align ' + nav.cssClass}} ">
    <li>
        <a href="/">
            <img *ngIf="nav.brandLogoPath" src="{{nav.brandLogoPath}}">
            <span *ngIf="!nav.brandLogoPath"> {{nav.brand}} </span>
            <span *ngIf="nav.showBothBrandAndLogo">
              <img *ngIf="nav.brandLogoPath" src="{{nav.brandLogoPath}}">
              <span class="sui-margin-left sui-margin-right"> {{nav.brand}} </span>
            </span>
        </a>
    </li>
    <li *ngFor="let item of nav.links">
        <a routerLink="{{item.routerLink}}" routerLinkActive="active" title="{{item.displayName}}" class="{{item.cssClass}}" [ngStyle]="item.style">
            <i *ngIf="item.icon" class="{{item.icon}}"> </i>
            <span *ngIf="item.showBothIconText">  
                <i *ngIf="item.icon" class="{{item.icon}}"> </i> {{item.displayName}} 
            </span>
            <span *ngIf="!item.icon"> {{item.displayName}}  </span>
        </a>
    </li>
</ul>