<div class="dropdown is-hoverable">
    <div class="dropdown-trigger">
        <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
          <span>Roles</span>
          <span class="icon is-small">
              <i class="fas fa-angle-down" aria-hidden="true"></i>
          </span>
        </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu" role="menu">
        <div class="dropdown-content">
          <a *ngFor="let role of roles | keyvalue">
            <button class="button is-info dropdown-item has-text-centered" *ngIf="role.value !== 'Guest'" (click)="changeRole(role.value)">{{ role.value }}</button>
          </a>
        </div>
    </div>
</div>
