akopdev/ng-person

A universal avatar component for Angular 2+ applications that generates truly unique colored letter avatar based on provided name.

ng-person

A universal avatar component for Angular 2+ applications that generates truly unique colored letter avatar based on provided name. It also supports user photo, name with subtitle and different styles.

Installation

Install ng-person component using NPM:

$ npm install ng-person --save

Usage

1. Once you have installed ng-person, you can import it into your AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgPersonModule } from 'ng-person';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Specify NgPersonModule as an import 
    NgPersonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. Call component from your Angular application:

<ng-person name="Akop Kesheshyan"></ng-person>

Examples

<ng-person name="Akop Kesheshyan" title="Software Developer"></ng-person>

<ng-person picture="https://example.com/pic.jpg" showName="false"></ng-person>

<ng-person name="Akop Kesheshyan" size="large" round="true"></ng-person>

Options

Attribute	Type	Description
picture	string	Absolute path to a picture image.
name	string	Specifies a name to be shown on the right of a user picture.
title	string	Specifies a title to be shown under the name.
showName	boolean	Whether to show a user name or not.
round	boolean	Round corners of the picture box.
size	string	Size of the component. Possible values: small, medium (default), large, giant.

License

MIT © Akop Kesheshyan