@libs-ui/components-avatar

Avatar

Giới thiệu

avatar là một component Avatar linh hoạt dùng cho ứng dụng Angular. Component này cho phép hiển thị avatar người dùng với nhiều tùy chọn khác nhau như hình ảnh, chữ cái đầu, màu sắc tự động, và hỗ trợ fallback khi ảnh bị lỗi.

Tính năng

• Hiển thị hình ảnh avatar người dùng
• Tự động hiển thị chữ cái đầu khi không có ảnh
• Tạo màu nền tự động dựa trên ID
• Hỗ trợ nhiều kích thước khác nhau (16px, 24px, 32px, 40px, 48px, 64px)
• Hỗ trợ hình dạng khác nhau (tròn, vuông)
• Xử lý lỗi hình ảnh với nhiều tùy chọn fallback
• Hỗ trợ tùy chỉnh class CSS

Cài đặt

Yêu cầu

• Angular 18.0.0 trở lên
• Tailwind CSS 3.3.0 trở lên

Hướng dẫn

Để cài đặt component avatar, sử dụng npm hoặc yarn:

npm install @libs-ui/components-avatar

hoặc

yarn add @libs-ui/components-avatar

Sử dụng

Import component

// example.component.ts
import { Component } from '@angular/core';
import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsAvatarComponent],
  template: `
    <libs_ui-components-avatar
      [linkAvatar]="'https://example.com/avatar.jpg'"
      [textAvatar]="'Nguyễn Văn A'"
      [idGenColor]="'user-123'"
      [size]="40">
    </libs_ui-components-avatar>
  `
})
export class ExampleComponent {
  // Component logic
}

Cách 2: Sử dụng file HTML riêng biệt

// example.component.ts
import { Component } from '@angular/core';
import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsAvatarComponent],
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  // Component logic
}

<!-- example.component.html -->
<libs_ui-components-avatar
  [linkAvatar]="'https://example.com/avatar.jpg'"
  [linkAvatarError]="'https://example.com/default-avatar.jpg'"
  [textAvatar]="'Nguyễn Văn A'"
  [idGenColor]="'user-123'"
  [size]="40"
  [typeShape]="'circle'">
</libs_ui-components-avatar>

Công nghệ sử dụng

• Angular 18: Sử dụng các tính năng mới nhất của Angular 18 như control flow (@if, @for), standalone components, và signals
• Tailwind CSS: Component được xây dựng với Tailwind CSS 3.3+ để quản lý style

API Reference

Inputs

Tên	Kiểu dữ liệu	Mặc định	Mô tả
linkAvatar	string	-	Đường dẫn của hình ảnh avatar
linkAvatarError	string	-	Đường dẫn của hình ảnh thay thế khi avatar chính bị lỗi
textAvatar	string	-	Văn bản hiển thị khi không có hình ảnh (thường là chữ cái đầu của tên)
idGenColor	string	-	ID dùng để tạo màu nền tự động khi sử dụng văn bản
size	16 | 24 | 32 | 40 | 48 | 64	32	Kích thước của avatar (tính bằng pixel)
typeShape	'circle' | 'rectangle'	'circle'	Hình dạng của avatar (tròn hoặc vuông)
classInclude	string	'mr-[8px]'	CSS class bổ sung cho container chính
classImageInclude	string	''	CSS class bổ sung cho thẻ img
getLastTextAfterSpace	boolean	false	Nếu true, chỉ lấy chữ cái đầu tiên của từ cuối cùng trong textAvatar

Outputs

Tên	Kiểu dữ liệu	Mô tả
outAvatarError	void	Sự kiện được kích hoạt khi linkAvatar bị lỗi và không có linkAvatarError

Interfaces

IAvatarConfig

export interface IAvatarConfig {
  classImageInclude?: string;
  classInclude?: string;
  size?: TYPE_SIZE_AVATAR_CONFIG;
  linkAvatar?: string;
  linkAvatarError?: string;
  idGenColor?: string;
  textAvatar?: string;
  typeShape?: TYPE_SHAPE_AVATAR;
  getLastTextAfterSpace?: boolean;
}

export type TYPE_SIZE_AVATAR_CONFIG = 16 | 24 | 32 | 40 | 48 | 64;
export type TYPE_SHAPE_AVATAR = 'circle' | 'rectangle';

Ví dụ

Avatar với ảnh và fallback

TypeScript (user-avatar.component.ts):

import { Component } from '@angular/core';
import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';

@Component({
  selector: 'app-user-avatar',
  standalone: true,
  imports: [LibsUiComponentsAvatarComponent],
  templateUrl: './user-avatar.component.html'
})
export class UserAvatarComponent {
  user = {
    id: 'user-123',
    name: 'Nguyễn Văn A',
    avatar: 'https://example.com/avatar.jpg'
  };

  handleAvatarError() {
    console.log('Không thể tải được hình ảnh avatar');
  }
}

HTML (user-avatar.component.html):

<libs_ui-components-avatar
  [linkAvatar]="user.avatar"
  [textAvatar]="user.name"
  [idGenColor]="user.id"
  [size]="40"
  (outAvatarError)="handleAvatarError()">
</libs_ui-components-avatar>

Nhóm Avatars với kích thước và hình dạng khác nhau

TypeScript (avatar-group.component.ts):

import { Component } from '@angular/core';
import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';

@Component({
  selector: 'app-avatar-group',
  standalone: true,
  imports: [LibsUiComponentsAvatarComponent],
  templateUrl: './avatar-group.component.html'
})
export class AvatarGroupComponent {
  users = [
    {
      id: 'user-1',
      name: 'Nguyễn Văn A',
      avatar: 'https://example.com/avatar1.jpg',
      size: 64
    },
    {
      id: 'user-2',
      name: 'Trần Thị B',
      avatar: 'https://example.com/avatar2.jpg',
      size: 48
    },
    {
      id: 'user-3',
      name: 'Lê Văn C',
      avatar: 'https://example.com/avatar3.jpg',
      size: 32
    },
    {
      id: 'user-4',
      name: 'Phạm Thị D',
      avatar: null,
      size: 24
    }
  ];
}

HTML (avatar-group.component.html):

<div class="flex items-center space-x-2">
  @for (user of users; track user.id) {
    <libs_ui-components-avatar
      [linkAvatar]="user.avatar"
      [textAvatar]="user.name"
      [idGenColor]="user.id"
      [size]="user.size"
      [typeShape]="user.id === 'user-4' ? 'rectangle' : 'circle'">
    </libs_ui-components-avatar>
  }
</div>