ngx-avatar-persona v1.0.0

Avatar Persona Angular Component

Overview

This component display an avatar with primary and secondary text. Upon clicking on it, the component displays a navigation menu allowing a user to navigate to either "Portal" or "Sign Out".

Note: The click does not cause the redirect. Rather, it emits an event to its parent component with either portal or logout string.

See also:

• github.com/greenpau/ngx-authp-service

Installation

npm install ngx-avatar-persona --save

# or

yarn add ngx-avatar-persona

Usage

Add the AvatarPersonaModule to your app.module.ts as a provider:

import { AvatarPersonaModule } from 'ngx-avatar-persona';

@NgModule({
  imports: [
    ...
    AvatarPersonaModule,
    ...
  ],
  ...
})

Next, add the AvatarPersonaComponent in app.component.html via ngx-avatar-persona.

    <mat-toolbar class="shadow" color="primary">
      <mat-toolbar-row>

        <span class="toolbar-avatar">
          <ngx-avatar-persona
            (redirect)="redirect($event)"
            [primaryText]="userAvatarPrimaryText"
            [secondaryText]="userAvatarSecondaryText"
            [avatarInitials]="userAvatarInitials"
            [avatarUrl]="userAvatarUrl">
          </ngx-avatar-persona>
        </span>

      </mat-toolbar-row>
    </mat-toolbar>

The app.component.ts should implement redirect() function to handle the re-routing.

For example, the following function implements the re-rerouting to Auth Portal link page and sign out.

  redirect(dest: string) {
    const cfg = this.authpService.getConfig();
    switch (dest) {
      case 'portal':
        window.location.href = `${cfg.baseUrl}/portal`;
        break;
      case 'logout':
        window.location.href = `${cfg.baseUrl}/logout`;
        break;
      default:
        console.error(`received unsupported redirect to ${dest}`);
        break;
    }
  }