# ngx-getavataaars

Angular component for displaying https://getavataaars.com/ avatars.

# Installation

`npm i @zvone/ngx-getavataaars`

# Usage

```typescript
@NgModule({
  imports: [
    NgxGetAvataaarsModule
  ]
})
export class AppModule {}
```

```html
<ngx-get-avatar width="100px" height="100px" [random]="true"></ngx-get-avatar>
```

| Input| Options | Default |
|--------------|---------|---------|
| avatarStyle  | 'Circle', 'Transparent' | '' |
| top | 'NoHair', 'Eyepatch', 'Hat', 'Hijab', 'Turban', 'WinterHat1', 'WinterHat2', 'WinterHat3', 'WinterHat4', 'LongHairBigHair', 'LongHairBob', 'LongHairBun', 'LongHairCurly', 'LongHairCurvy', 'LongHairDreads', 'LongHairFrida', 'LongHairFro', 'LongHairFroBand', 'LongHairNotTooLong', 'LongHairShavedSides', 'LongHairMiaWallace', 'LongHairStraight', 'LongHairStraight2', 'LongHairStraightStrand', 'ShortHairDreads01', 'ShortHairDreads02', 'ShortHairFrizzle', 'ShortHairShaggyMullet', 'ShortHairShortCurly', 'ShortHairShortFlat', 'ShortHairShortRound', 'ShortHairShortWaved', 'ShortHairSides', 'ShortHairTheCaesar', 'ShortHairTheCaesarSidePart' | '' |
| accessories | 'Blank', 'Kurt', 'Prescription01', 'Prescription02', 'Round', 'Sunglasses', 'Wayfarers' | '' |
| facialHair | 'Blank', 'BeardMedium', 'BeardLight', 'BeardMagestic', 'MoustacheFancy', 'MoustacheMagnum' | '' |
| clothes | 'BlazerShirt', 'BlazerSweater', 'CollarSweater', 'GraphicShirt', 'Hoodie', 'Overall', 'ShirtCrewNeck', 'ShirtScoopNeck', 'ShirtVNeck' | '' |
| eyes | 'Close', 'Cry', 'Default', 'Dizzy', 'EyeRoll', 'Happy', 'Hearts', 'Side', 'Squint', 'Surprised', 'Wink', 'WinkWacky' | '' |
| eyebrows | 'Angry', 'AngryNatural', 'Default', 'DefaultNatural', 'FlatNatural', 'RaisedExcited', 'RaisedExcitedNatural', 'SadConcerned', 'SadConcernedNatural', 'UnibrowNatural', 'UpDown', 'UpDownNatural' | '' |
| mouth | 'Concerned', 'Default', 'Disbelief', 'Eating', 'Grimace', 'Sad', 'ScreamOpen', 'Serious', 'Smile', 'Tongue', 'Twinkle', 'Vomit' | '' |
| skin | 'Tanned', 'Yellow', 'Pale', 'Light', 'Brown', 'DarkBrown', 'Black' | '' |
| width | CSS width | undefined |
| height | CSS height | undefined |
| random | true, false | false |

```html
<ngx-get-avatar width="100px"
                height="100px"
                avatarStyle="Circle"
                top="NoHair"
                accessories="Sunglasses"
                facialHair="BeardLight"
                clothes="Hoodie"
                mouth="Smile"
                skin="Light"
></ngx-get-avatar>
```

![](https://avataaars.io/?avatarStyle=Circle&topType=NoHair&accessoriesType=Sunglasses&facialHairType=BeardLight&facialHairColor=BrownDark&clotheType=Hoodie&clotheColor=Gray01&eyeType=Default&eyebrowType=Default&mouthType=Smile&skinColor=Light)

# Roadmap

- Add a few missing options