ngx-admin-lte documentation
  1. Components
  2. UserBoxComponent

File

src/widgets/user-box/user-box.component.ts

Implements

OnInit

Metadata

selector .userBox
styleUrls user-box.component.css
templateUrl ./user-box.component.html

Index

Properties
Methods

Constructor

constructor(userServ: UserService, router: Router)
Defined in src/widgets/user-box/user-box.component.ts:21
Parameters :
Name Type Optional Description
userServ UserService
router Router

Methods

Public ngOnInit
ngOnInit()
Defined in src/widgets/user-box/user-box.component.ts:28
Returns : void

Properties

Public currentUser
currentUser: User
Type : User
Defined in src/widgets/user-box/user-box.component.ts:16
Public logout
logout:
Defined in src/widgets/user-box/user-box.component.ts:32
 
import { Component, OnInit } from '@angular/core';
import { User } from '../../models/user';
import { UserService } from '../../services/user.service';
import { Router } from '@angular/router';

@Component({
  /* tslint:disable */
  selector: '.userBox',
  /* tslint:enable */
  styleUrls: ['./user-box.component.css'],
  templateUrl: './user-box.component.html'
})
export class UserBoxComponent implements OnInit {

  // default user, only an example, please use the userService to modify
  public currentUser: User =  new User({
      avatarUrl: 'assets/img/user2-160x160.jpg',
      email: 'weber.antoine@outlook.com',
      firstname: 'WEBER',
      lastname: 'Antoine'
  });

  constructor(private userServ: UserService, private router: Router) {
    // se connecter au modif du user courant
    this.userServ.getCurrent().subscribe((user: User) => this.currentUser = user);
  }

  public ngOnInit() {
    // TODO
  }

  public logout = (): void => {
    this.userServ.logout();
  }
}

<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
  <!-- The user image in the navbar-->
  <img *ngIf="currentUser.avatarUrl != ''" [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 *ngIf="currentUser.avatarUrl != ''" [src]="currentUser.avatarUrl" class="img-circle" [alt]="currentUser.getName()">
    <p>
      {{currentUser.getName()}} - Web Developer
      <small>{{ 'USERBOX.MEMBERSINCE' | translate }} {{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">{{ 'USERBOX.PROFILE' | translate }}</a>
    </div>
    <div class="pull-right">
      <a (click)="logout()" class="btn btn-default btn-flat">{{ 'USERBOX.SIGNOUT' | translate }}</a>
    </div>
  </li>
</ul>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""