@mindarchitect-ngx-libraries/ngx-avatar-lib v17.3.5
@mindarchitect-ngx-libraries/ngx-avatar-lib - Avatar library
Table of Contents
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)
28 days ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
6 months ago
6 months ago
10 months ago
11 months ago
10 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago