@mindarchitect-ngx-libraries/ngx-avatar-lib v18.1.1

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

Properties and events:

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)