ngx-admin-lte/src/widgets/user-box/user-box.component.html

AdminLTE theme for angular

<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
  <!-- The user image in the navbar-->
  <img [src]="currentUser.avatarUrl" class="user-image" [alt]="currentUser.getName()">
  <!-- hidden-xs hides the username on small devices so only the image appears. -->
  <span class="hidden-xs">{{currentUser.getName()}}</span>
</a>
<ul class="dropdown-menu">
  <!-- The user image in the menu -->
  <li class="user-header">
    <img [src]="currentUser.avatarUrl" class="img-circle" [alt]="currentUser.getName()">
    <p>
      {{currentUser.getName()}} - Web Developer
      <small>Member since {{currentUser.creationDate}}</small>
    </p>
  </li>
  <!-- Menu Body -->
  <li class="user-body">
    <div class="col-xs-4 text-center">
      <a href="#">Followers</a>
    </div>
    <div class="col-xs-4 text-center">
      <a href="#">Sales</a>
    </div>
    <div class="col-xs-4 text-center">
      <a href="#">Friends</a>
    </div>
  </li>
  <!-- Menu Footer-->
  <li class="user-footer">
    <div class="pull-left">
      <a href="#" class="btn btn-default btn-flat">Profile</a>
    </div>
    <div class="pull-right">
      <a (click)="logout()" class="btn btn-default btn-flat">Sign out</a>
    </div>
  </li>
</ul>