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: 6 months 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 5 years ago)
- Default Branch: master
- Last Pushed: 2022-06-03T01:34:56.000Z (almost 3 years ago)
- Last Synced: 2024-11-24T18:08:01.363Z (6 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.
## 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])