ngx-getavataaars

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

Installation

npm i @zvone/ngx-getavataaars

Usage

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

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

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

Roadmap

• Add a few missing options