@mindarchitect-ngx-libraries/ngx-avatar-lib

@mindarchitect-ngx-libraries/ngx-avatar-lib - Avatar library

Table of Contents

• Components
• Dependencies
• Installation
• API
• Usage
• Support
• License

Components

• <ngx-avatar></ngx-avatar> is designed and developed to select and display user avatar and bind avatar image change event handler.

• Avatar component

  

• Avatar update mode

  

• Avatar default image

  

---

Dependencies

• Developed and tested with Angular 17.x

---

Installation

Install via npm

Installing @mindarchitect-ngx-libraries/ngx-avatar-lib via npm:

npm install --save @mindarchitect-ngx-libraries/ngx-avatar-lib

---

Import the library

Once installed you need to import the main modules:

import { NgxAvatarLibModule, NgxAvatarLibConfigurationProvider } from '@mindarchitect-ngx-libraries/ngx-avatar-lib';

Next, provide configuration implementation for the library:

@NgModule({
    ...
    imports: [
        ...
        NgxAvatarLibModule.forRoot({
            provider: {
                provide: NgxAvatarLibConfigurationProvider,
                useClass: ExampleNgxAvatarLibConfigurationProvider
            }
        })
    ]
    ...
})
export class AppModule {
}

Example of the configuration:

import {Injectable} from "@angular/core";
import {
    NgxAvatarLibConfiguration,
    NgxAvatarLibConfigurationProvider
} from "@mindarchitect-ngx-libraries/ngx-avatar-lib";

@Injectable({ providedIn: 'root' })
export class ExampleNgxAvatarLibConfigurationProvider implements NgxAvatarLibConfigurationProvider {
    get Configuration(): NgxAvatarLibConfiguration {
        return {
            defaultAvatarImagePath: '/assets/',
            defaultAvatarImageFileName: 'avatar.jpg'
        };
    }
}

---

API

Types:

Type	Description
FileReaderResultType	File reader result helper intersection type (string or ArrayBuffer or null)

Properties and events:

Property	Bind	Type	Default	Description
imageSource	Input()	FileReaderResultType	null	Image source
scale	Input()	number	1.0	Image scale for both x and y dimensions
imageSourceUpdated	Output()	File or null	EventEmitter	Emits image source changing event

Methods:

Method	Description
setImage(imageSource: FileReaderResultType)	Sets avatar image source. If image source is null or empty, default is used

---

Usage

Add the @mindarchitect-ngx-libraries/ngx-avatar-lib element to your template:

<ngx-avatar #avatar imageSource="{{ImageSource}}" [scale]="0.9" (imageSourceUpdated)="imageSourceUpdated($event)"></ngx-avatar>

This will display avatar image using image source property binding and defining image source update event handler.

You can use @ViewChild annotation to access component directly from consumer code:

@ViewChild('avatar') ngxAvatarLibComponent!: NgxAvatarLibComponent;

---

Support

---

License

Copyright (c) 2022-2024 Andrey Lavrusha. Licensed under the MIT License (MIT)