ngx-admin-lte/src/widgets/menu-aside/menu-aside.component.html

AdminLTE theme for angular

<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
	<!-- sidebar: style can be found in sidebar.less -->
	<section class="sidebar" >
		<!-- Sidebar user panel (optional) -->
		<div *ngIf="display_menu_user" class="user-panel">
			<div class="pull-left image" *ngIf="currentUser?.avatarUrl" >
				<img [src]="currentUser?.avatarUrl" class="img-circle"
					[alt]="currentUser?.getName()">
			</div>
			<div class="pull-left info">
				<p>{{currentUser?.getName()}}</p>
				<!-- Status -->
				<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
			</div>
		</div>
		<!-- search form (Optional) -->
		<form *ngIf="display_menu_search" action="#" method="get" class="sidebar-form">
			<div class="input-group">
				<input type="text" name="q" class="form-control"
					placeholder="Search..."> <span class="input-group-btn">
					<button type="submit" name="search" id="search-btn"
						class="btn btn-flat">
						<i class="fa fa-search"></i>
					</button>
				</span>
			</div>
		</form>
		<!-- /.search form -->
		<!-- Sidebar Menu -->
		<ul class="sidebar-menu" data-widget="tree">
			<li class="header">{{menu_title}}</li>
			<ng-container *ngFor="let item of links">
				<ng-container *ngIf="!item.sublinks">
					<li [class.active]="item.link[0] === currentUrl">
						<a *ngIf="!item.external" [routerLink]="item.link">
							<i class="fa fa-{{item.icon}}"></i>
							<span>{{item.title}}</span>
						</a>
						<a *ngIf="item.external" [href]="item.link" [target]="item.target">
							<i class="fa fa-{{item.icon}}"></i>
							<span>{{item.title}}</span>
						</a>
					</li>
				</ng-container>

				<ng-container *ngIf="item.sublinks">
					<li class="treeview">
						<a href="#">
							<i *ngIf="item.icon" class="fa fa-{{item.icon}}"></i>
							<span>{{item.title}}</span>
              <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
              </span>
							<!--i class="fa fa-angle-left pull-right"></i-->
						</a>
						<ul class="treeview-menu">
							<ng-container *ngFor="let subitem of item.sublinks">
								<li [class.active]="subitem.link[0] === currentUrl">
									<a *ngIf="!subitem.external" [routerLink]="subitem.link">
										<i *ngIf="subitem.icon" class="fa fa-{{subitem.icon}}"></i>
										<span>{{subitem.title}}</span>
									</a>
									<a *ngIf="subitem.external" [href]="subitem.link" [target]="subitem.target">
										<i *ngIf="subitem.icon" class="fa fa-{{subitem.icon}}"></i>
										<span>{{subitem.title}}</span>
									</a>
								</li>
							</ng-container>
						</ul>
					</li>
					</ng-container>
				</ng-container>
			</ul>
		<!-- /.sidebar-menu -->
	</section>
	<!-- /.sidebar -->
</aside>