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

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