ng-hub-ui-avatar

ng-hub-ui-avatar

Part of ng-hub-ui Family

This component is part of the ng-hub-ui ecosystem, which includes:

• ng-hub-ui-table
• ng-hub-ui-modal
• ng-hub-ui-stepper
• ng-hub-ui-breadcrumbs
• ng-hub-ui-portal

Credits and Attribution

This library is a fork of ngx-avatars, originally created by HaithemMosbahi and maintained by Tiago Casinhas.

The original work provided an excellent foundation for avatar management in Angular applications. This fork was created to:

• Provide a standalone component architecture
• Ensure compatibility with the latest Angular versions
• Integrate seamlessly with the ng-hub-ui component ecosystem
• Add new features and improvements while maintaining the original functionality

All credit for the original implementation goes to the original authors and contributors of ngx-avatars.

Description

A versatile avatar component for Angular applications that fetches or generates avatars based on user information. The component includes a sophisticated fallback system that attempts different sources if the primary source fails.

You can use this component with either a single source or multiple avatar sources, with the fallback system automatically selecting the first valid avatar.

Additionally, the component can display name initials or custom values as avatars.

Supported avatar sources:

• Facebook
• Google
• Twitter
• Instagram
• Vkontakte (VK)
• Skype
• Gravatar (🚧 Under construction)
• GitHub
• Custom image
• Name initials
• Value

The fallback system follows the same order as the source list above, with Facebook having the highest priority.

Installation

Install the avatar component using npm:

npm install ng-hub-ui-avatar --save

Or using yarn:

yarn add ng-hub-ui-avatar

Usage

As this is a standalone component, you don't need to import any module. Just import the component directly in your standalone components or pages:

import { Component } from '@angular/core';
import { NgHubUiAvatar } from 'ng-hub-ui-avatar';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [NgHubUiAvatar],
  template: `
    <ng-hub-ui-avatar></ng-hub-ui-avatar>
  `
})
export class MyComponent { }

If you're using NgModule (legacy approach), you can import it in your components array:

import { NgModule } from '@angular/core';
import { NgHubUiAvatar } from 'ng-hub-ui-avatar';

@NgModule({
  imports: [
    // other imports...
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use it in your components:

<ng-hub-ui-avatar></ng-hub-ui-avatar>

Examples

<ng-hub-ui-avatar facebookId="1508319875"></ng-hub-ui-avatar>
<ng-hub-ui-avatar googleId="1508319875"></ng-hub-ui-avatar>
<ng-hub-ui-avatar twitterId="1508319875"></ng-hub-ui-avatar>
<ng-hub-ui-avatar instagramId="dccomics" size="70"></ng-hub-ui-avatar>
<ng-hub-ui-avatar name="John Doe"></ng-hub-ui-avatar>
<ng-hub-ui-avatar value="75%"></ng-hub-ui-avatar>

<!-- Multiple sources with fallback -->
<ng-hub-ui-avatar 
  facebookId="userFacebookID" 
  skypeId="userSkypeID"
  googleId="google" 
  name="John Doe" 
  src="assets/avatar.jpg"
  value="28%" 
  size="100" 
  [round]="true">
</ng-hub-ui-avatar>

Options

Attribute	Type	Default	Description
facebookId	string	null	Facebook ID
googleId	string	null	Google ID
twitterId	string	null	Twitter Handle
instagramId	string	null	Instagram Handle
vkontakteId	string	null	VK ID
skypeId	string	null	Skype ID
githubId	string	null	Github ID
src	string	null	Fallback image to use
name	string	null	Will be used to generate avatar based on initials
value	string	null	Show a value as avatar
initialsSize	number	0	Limits the number of characters in initials (0 = no limit)
bgColor	string	random	Background color (hex format, e.g., #FF0000)
fgColor	string	#FFF	Text color (hex format, e.g., #FF0000)
size	number	50	Size of the avatar
textSizeRatio	number	3	Text size as a fraction of avatar size
round	boolean	true	Round the avatar corners
cornerRadius	number	0	Border radius for square avatars
borderColor	string	undefined	Border color
style	object		Custom styles for root element
clickOnAvatar	Output		Event emitted on avatar click
referrerpolicy	string	null	Referrer policy for image requests

Support the Project

If you find this library helpful, consider supporting its development:

Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create your feature branch: git checkout -b feature/my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin feature/my-new-feature
5. Submit a pull request

License

MIT © Carlos Morcillo