AvatarList

Avatar List is a simple material compoment displaing avatar images overlapped allowing a menu to select a specific avatar - provides data on selection.

Installation

npm install avatar-list

Scaffolding

Import the module into your project under imports AvatarsListModule

imports: [
    BrowserModule,
    AppRoutingModule,
    AvatarsListModule
  ],

Selector Usage

This is the basic selector

<app-avatars-list [data]="data" [select]="false" (selected)="onSelectedAvatar($event)"

Inputs

The following Inputs are available

| Input | Type | Defaut | Description | | -------| ---- | ------ | ----------- | | data | AvatarDetails | avatar | this is an array of avatar objects | | select | Boolean | false | provides a menu for specific avatar selection |

AvatarDetails Model

Here is a sample of the AvatarDetail model information

{ id: 0, name: 'Name of Person', image: 'src.image.png', email: '[email protected]' }

Outputs

| Event | Type | Description | | ---------- | ------ | ----------- | | selected | AvatarDetails | Returns the AvatarDetails object |