45 | ![]()
55 |
56 |
60 |
61 | `
62 | })
63 | export class AvatarComponent implements OnChanges, OnDestroy {
64 | @Input()
65 | public round = true;
66 | @Input()
67 | public size: string | number = 50;
68 | @Input()
69 | public textSizeRatio = 3;
70 | @Input()
71 | public bgColor: string | undefined;
72 | @Input()
73 | public fgColor = '#FFF';
74 | @Input()
75 | public borderColor: string | undefined;
76 | @Input()
77 | public style: Style = {};
78 | @Input()
79 | public cornerRadius: string | number = 0;
80 | @Input('facebookId')
81 | public facebook?: string | null;
82 | @Input('twitterId')
83 | public twitter?: string | null;
84 | @Input('googleId')
85 | public google?: string | null;
86 | @Input('instagramId')
87 | public instagram?: string | null;
88 | @Input('vkontakteId')
89 | public vkontakte?: string | null;
90 | @Input('skypeId')
91 | public skype?: string | null;
92 | @Input('gravatarId')
93 | public gravatar?: string | null;
94 | @Input('githubId')
95 | public github?: string | null;
96 | @Input('src')
97 | public custom?: string | null;
98 | @Input('name')
99 | public initials?: string | null;
100 | @Input()
101 | public value?: string | null;
102 | @Input()
103 | public placeholder?: string;
104 | @Input()
105 | public initialsSize: string | number = 0;
106 |
107 | @Output()
108 | public clickOnAvatar: EventEmitter
57 | {{ avatarText }}
58 |
59 |
3 |
20 |
29 | 30 |
40 |
58 |
59 |
--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | ngx-avatar {
2 | display:inline-block;
3 | }
4 |
5 | div {
6 | text-align: center;
7 | }
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { HttpClientTestingModule } from '@angular/common/http/testing';
2 | import { NO_ERRORS_SCHEMA } from '@angular/core';
3 | import { TestBed, waitForAsync } from '@angular/core/testing';
4 |
5 | import { AppComponent } from './app.component';
6 | import { UserService } from './user.service';
7 |
8 | const userServiceStub = {
9 | fetchInformation: jasmine.createSpy('userService.fetchInformation'),
10 | getUserFacebook: jasmine.createSpy('userService.getUserFacebook')
11 | };
12 |
13 | describe('AppComponent', () => {
14 | beforeEach(waitForAsync(() => {
15 | TestBed.configureTestingModule({
16 | declarations: [AppComponent],
17 | imports: [HttpClientTestingModule],
18 | providers: [{ provide: UserService, use: userServiceStub }],
19 | schemas: [NO_ERRORS_SCHEMA]
20 | }).compileComponents();
21 | }));
22 | it('should create the app', waitForAsync(() => {
23 | const fixture = TestBed.createComponent(AppComponent);
24 | const app = fixture.debugElement.componentInstance;
25 | expect(app).toBeTruthy();
26 | }));
27 | });
28 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { UserService } from './user.service';
3 | import { Source } from '../../projects/ngx-avatar/src/lib/sources/source';
4 |
5 | @Component({
6 | selector: 'app-root',
7 | templateUrl: './app.component.html',
8 | styleUrls: ['./app.component.scss']
9 | })
10 | export class AppComponent implements OnInit {
11 | userName = 'Haithem Mosbahi';
12 | userFB = 'wrongId';
13 | customStyle = {
14 | backgroundColor: '#27ae60',
15 | border: '1px solid #bdc3c7',
16 | borderRadius: '50%',
17 | color: 'white',
18 | cursor: 'pointer'
19 | };
20 |
21 | failedSources: number[] = [];
22 |
23 | constructor(public userService: UserService) {}
24 |
25 | ngOnInit() {
26 | this.userService.fetchInformation().subscribe(user => {
27 | this.userName = user.username;
28 | this.userService.getUserFacebook().subscribe(data => {
29 | this.userFB = data;
30 | });
31 | });
32 | }
33 |
34 | avatarClicked(event: Source) {
35 | alert('click on avatar fetched from ' + event.sourceType);
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 | import { HttpClientModule } from '@angular/common/http';
4 |
5 | import { AvatarModule } from 'ngx-avatar';
6 |
7 | import { AppComponent } from './app.component';
8 | import { UserService } from './user.service';
9 |
10 | const avatarColors = ['#FFB6C1', '#2c3e50', '#95a5a6', '#f39c12', '#1abc9c'];
11 |
12 | @NgModule({
13 | declarations: [AppComponent],
14 | imports: [
15 | BrowserModule,
16 | HttpClientModule,
17 | AvatarModule.forRoot({
18 | colors: avatarColors
19 | })
20 | ],
21 | providers: [UserService],
22 | bootstrap: [AppComponent]
23 | })
24 | export class AppModule {}
25 |
--------------------------------------------------------------------------------
/src/app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "testing",
3 | "private": true,
4 | "description_1": "This is a special package.json file that is not used by package managers.",
5 | "description_2": "It is used to tell the tools and bundlers whether the code under this directory is free of code with non-local side-effect. Any code that does have non-local side-effects can't be well optimized (tree-shaken) and will result in unnecessary increased payload size.",
6 | "description_3": "It should be safe to set this option to 'false' for new applications, but existing code bases could be broken when built with the production config if the application code does contain non-local side-effects that the application depends on.",
7 | "description_4": "To learn more about this file see: https://angular.io/config/app-package-json.",
8 | "sideEffects": false
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/user.model.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Represents the User contract
3 | */
4 | export interface User {
5 | username: string;
6 | facebookId: string;
7 | }
8 |
--------------------------------------------------------------------------------
/src/app/user.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Observable } from 'rxjs';
3 | import { map } from 'rxjs/operators';
4 | import { User } from './user.model';
5 | import { HttpClient } from '@angular/common/http';
6 |
7 | /**
8 | * Service used to fetch Async information about the user
9 | */
10 | @Injectable()
11 | export class UserService {
12 | constructor(private http: HttpClient) { }
13 |
14 | fetchInformation(): ObservableAvatar from different sources
4 |20 |
Avatar with fallback
21 | 22 | 23 |29 | 30 |
Initials & Value Avatar
31 | 32 |40 |