snics / ng2-avatar

Ng2-avatar is a simple and lightweight avatar component for Angular 2+

ng2-avatar

,

Angular Avatar (ng2-avatar) is a simple and lightweight avatar component

Demo

View all the directives in action at https://snics.github.io/ng2-avatar

Dependencies

• Angular (requires Angular 2 or higher, tested with 2.0.0)

Installation

Install above dependencies via npm.

Now install ng2-avatar via:

npm install --save ng2-avatar

---

SystemJS

Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file, map needs to tell the System loader where to look for ng2-avatar:

map: {
  'ng2-avatar': 'node_modules/ng2-avatar/bundles/ng2-avatar.umd.js',
}

---

Once installed you need to import the main module:

import { AvatarModule } from 'ng2-avatar';

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice AvatarModule.forRoot()):

import { AvatarModule } from 'ng2-avatar';

@NgModule({
  declarations: [
    AppComponent, 
    ...
  ],
  imports: [
    AvatarModule.forRoot(), 
    ...
  ],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import AvatarModule:

import { AvatarModule } from 'ng2-avatar';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [AvatarModule, ...], 
})
export class OtherModule {
}

Usage

  <avatar [email]="email" [displayType]="'circle'"></avatar>
  <input type="email" [(ngModel)]="email">

Configuration

configuration option	type	default	description
email	String	none	This email is for generated the initials letters or get the picture from Gravatar API (required)
name	string	none	This name is for generated the initials letters (required)
size	number	100	Is the size of the image and avatar
background	string	Random color	The background colors for the letter's avatar
displayType	string	circle	none, circle, rounded
letter	string	?	These are the default letter
defaultProtocol	string	null	specifies a protocol or uses protocol-agnostic gravatar url when empty

License

Copyright (c) 2017 Nico Swiatecki. Licensed under the MIT License (MIT) - Initial work - Snics

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

ng2-avatar's Issues

Error when updating to the latest Angular Version

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

OS and Version?

Windows Server 2016

Versions

Angular CLI: 6.2.3
Node: 8.9.4
OS: win32 x64
Angular: 6.1.8
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.8.3
@angular/cdk 6.4.7
@angular/cli 6.2.3
@angular/material 6.4.7
@ngtools/webpack 6.0.8
@schematics/angular 0.8.3
@schematics/update 0.8.3
rxjs 6.3.2
typescript 2.9.2
webpack 4.8.3

npm 5.6.0

node v8.9.4

Repro steps

ng update @angular/core

The log given by the failure

Package "ng2-avatar" has an incompatible peer dependency to "@angular/core" (requires "^2.0.0" (extended), would install "6.1.9").
Package "ng2-avatar" has an incompatible peer dependency to "@angular/common" (requires "^2.0.0" (extended), would install "6.1.9").
Incompatible peer dependencies found. See above.

Console.log left in code

Hi,

The plugin works great, just one small annoying thing..

https://github.com/snics/ng2-avatar/blob/master/src/avatar.component.ts#L60

Can't bind to 'name' since it isn't a known property of 'avatar'.

Hello,

I imported the AvatarModule in my root module but when I use it in one of my components I get this error. Any help would be great.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';

import 'hammerjs';

import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
import { SharedModule } from './core/modules/shared.module';
import { AppComponent } from './app.component';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { FuseMainModule } from './main/main.module';
import { FuseSplashScreenService } from './core/services/splash-screen.service';
import { FuseConfigService } from './core/services/config.service';
import { FuseSampleModule } from './main/content/sample/sample.module';
import { FuseChatModule } from './chat/chat.module';
import { AgentloginModule } from './agentlogin/agentlogin.module';
import { SocketService } from './socket.service';
import { SharedService } from './shared.service';
import { LokiService } from 'angular2-loki';
import { DatabaseService } from './database.service';
import { AvatarModule } from "ng2-avatar";
const appRoutes: Routes = [

    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full'

    }
];

@NgModule({
    declarations: [
        AppComponent],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        HttpClientModule,
        BrowserAnimationsModule,
        AvatarModule.forRoot(),
        RouterModule.forRoot(appRoutes),
        SharedModule,
        InMemoryWebApiModule.forRoot(FuseFakeDbService, { delay: 125 }),
        PerfectScrollbarModule.forRoot(),
        FuseMainModule,
        FuseSampleModule,
        FuseChatModule,
        AgentloginModule
    ],
    providers: [
        FuseSplashScreenService,
        FuseConfigService,
        SocketService,
        SharedService,
        LokiService,
        DatabaseService
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {
}

chat-view.component.html: where I want to use
<avatar [name]="user.userFullname" [displayType]="'circle'"></avatar>

the error :

angular universal support - (Error: SyntaxError: Unexpected token import)

Bug Report or Feature Request (mark with an x)

- [ x] bug report -> please search issues before submitting
- [ ] feature request

OS and Version?

OS : macOs HighSierra

Versions

Angular: 1.6.8
Node: local (8.9.4) cloud (6xx)
Npm: local 5.6.0 - cloud (4xx)

Repro steps

Deploying to cloud is not working!
Since node v6 does not support import and export statements, all js files of this module
should be transpiled to es5, and converting these syntax e.g from import to require..

The log given by the failure

Error: Error occurred while parsing your function triggers.

/Users/x/myproject/node_modules/ng2-avatar/module/component/avatar.component.js:2
import { Component, Input } from '@angular/core';
^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.L0VR (/

Desired functionality

the module should not use import statement!
to support all nodes versions for SSR (server side rendering), the js files should be transpiled to es5 and use require instead of import statements...

note: here is a link on how I fixed similar issues...

Get a 404 when email not exist in Gravatar

When whe complete the email and name atributtes and the user doues not exists in Gravatar we get a 404 in console, If we what to use this component in a grid we will get a full console with 404 error, can be disabled the 404 response when gravatar not exists?

It only seems to handle a single letter. I'd like initials e.g. NR

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request

OS and Version?

Versions

Repro steps

The log given by the failure

Desired functionality

Mention any other details that might be useful

How to make avatar responsive?

How can I make the avatar responsive?

Thanks.

protocol-agnostic approach breaks when using file: as protocol

For example when using Cordova and/or Ionic the Gravatar URL of the request will look like file://www.gravatar.com/avatar/...?s=40&d=404.
There may should be a check if http is used at all.

ng2-avatar/src/avatar.component.ts

Line 68 in 154766e

this.gravatarUrl = `//www.gravatar.com/avatar/${hash}?s=${this.size}&d=404`;

change background dynamically

Anyway to add the ability to update the background color, like after an a sync call to pull an object from the database that's storing a color attribute?

Give option to the user to Limit the number of Letters in the Avatar

• feature request

Give option to the user to Limit the number of Letters in the Avatar

Avatar sometimes shows multiple letters, It's better user can limit the number of letters showing in the Avatar.

like this

<avatar [name]="deal.opportunityName" numOfLetters="1" ></avatar>

How do I change font color

How do I change the font color

serve --prod fails

after we import to app module
`import { AvatarComponent } from 'ng2-avatar'
where shoud we put it
is it in declaration, import ...
if put under declaration, ng serve works but ng serve --prod fails

AvatarModule in import section of module declaration

I think there's a typo in the README.

You say

import { AvatarModule } from 'ng2-avatar';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [LibModule, ...], 
})
export class OtherModule {
}

It should be

import { AvatarModule } from 'ng2-avatar';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [AvatarModule, ...],  <<<---------
})
export class OtherModule {
}

It doesn't compile if missing

Thanks

Printing email address in the console log

ng2 avatar code is printing the email address in the console. It will be great if we can remove console statement from the code.