https://github.com/akopdev/ng-person

A universal avatar component for Angular 2+ applications that generates truly unique colored letter avatar based on provided name.
https://github.com/akopdev/ng-person

angular angular2 avatar avatar-placeholder initials-avatar letter-avatar

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/akopdev/ng-person
• Owner: akopdev
• License: mit
• Created: 2020-02-15T08:44:41.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-06-03T01:34:56.000Z (over 2 years ago)
• Last Synced: 2024-07-24T10:54:00.896Z (about 2 months ago)
• Topics: angular, angular2, avatar, avatar-placeholder, initials-avatar, letter-avatar
• Language: TypeScript
• Homepage:
• Size: 1.09 MB
• Stars: 18
• Watchers: 1
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# 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.

![demo](demo.png)

## 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:

```javascript

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:

```html

```

## Examples

```html

```

## 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](mailto:[email protected])