haithemmosbahi / ngx-avatar Goto Github PK
View Code? Open in Web Editor NEWUniversal avatar component for angular 2+ applications makes it possible to fetch / generate avatar from different sources
License: MIT License
Universal avatar component for angular 2+ applications makes it possible to fetch / generate avatar from different sources
License: MIT License
Add a source for GitHub avatar pictures.
Would it be feasible to add a tooltip that shows the name / email / whatever info is convenient?
Thanks, Chad
Tried to install in a project that is using Angular2, of course the first error was the use of InjectionToken instead of OpaqueToken, but when changing InjectionToken to OpaqueToken i get "Can't resolve all parameters for AvatarComponent". What's the right branch or the right method in order to use this library with Angular 2 project?
When a name
is provided to the ngx-avatar
-component, I would like it to use the name as an alt
-text on the img
to make it accessible.
Javascript Console Errors:
Failed to load resource: the server responded with a status of 400 (Bad Request)
my-rides:1
Access to XMLHttpRequest at 'https://picasaweb.google.com/data/entry/api/user/****?alt=json' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
ngx-avatar.js:984 ngx-avatar: error while fetching google avatar
Google Note:
https://developers.google.com/picasa-web/
ngx-avatar version:
3.2.0
1).avatar .avatar-container{
height:60px ;
width: 60px ;
}
which one is correct?
Component will work with static data but doesn't update with dynamic data loaded via an async call to a service on pageload.
<ngx-avatar name="{{user.name}}" bgColor="{{user.color}}" size="250"></ngx-avatar>
ngOnInit() { this.userService.get(this.userId).subscribe( u => { this.user = u; }); }
Can you add support for angular 5 - works fine buts requires a peer of @angular/core@^4.0.0 and @angular/http@^4.0.0
thanks
Hi,
cant import the ngx-avatar module in my app.module. Then i get the error "Cannot find module 'testing'".
I installed the module from master with the git link with npm. I noticed that there are no *.d.ts files anymore
after importing and the package.config changed a lot which could cause the problem.
Looks like the project name was changed to "testing" and version is changed to "0.0.0".
Could you please have a look at this?
Just want to start off by saying that this is absolutely amazing.
Have been using for about a week now it has saved me loads of development time. However, I just recently ran into an issue when attempting to build.
I get the following warning:
WARNING in ./src/$$_gendir/~/ngx-avatar/ngx-avatar.ngfactory.ts
271:44-54 "export 'ɵa' (imported as 'import1') was not found in 'ngx-avatar'
and I get the following error:
ERROR in ng:///H:/Code/Megatron/Client/node_modules/ngx-avatar/ngx-avatar.d.ts.AvatarComponent.html (4,5): Type 'string' is not assignable to type 'boolean'.
Thanks!
@HaithemMosbahi Latest version is broken. Unable to import the module with latest version. see the stackblitz:
https://stackblitz.com/edit/ngx-avatar-demo-zdqn85
Downgrading to 3.5.0 works.
Hello!
I'm having a nuisance bug using Ionic 4 with virtual scroll. When I scroll quickly on the list, the avatars get their initials changed and wrong. I tried to correct with the approx-item-height of the virtual scroll, but without success.
Is there any way to fix this?
Ionic:
ionic (Ionic CLI) : 4.12.0
System:
NodeJS : v11.9.0
npm : 6.8.0
OS : macOS Mojave
Is there any option to restrict it to show just 2 characters in avatar?
In my Angular 7 app I successfully integrated ngx-avatar 3.2.0. However, I can't find how to call AvatarService.getRandomColor()
. In my component file I have:
import { AvatarService } from 'ngx-avatar/lib/avatar.service';
...
constructor(private avatarService: AvatarService) { }
...
const color = this.avatarService.getRandomColor(name);
But my compilation fails with the following error:
ERROR in some.component.ts
Module not found: Error: Can't resolve 'ngx-avatar/lib/avatar.service' in 'd:\projects\...'
Is there a way to fallback to initials in case if the image is missing. In my use case we don't have pictures for all users so the component ends up with an error and missing image.
I can always write something as a precursor to check for existence of valid image prior to initializing ngx-avatar but think it would be better for the component itself to handle this.
Would like to know if this can be configured in any way.
Thanks
Andy
It's not immediately clear how to use this with ngUpgrade, as usually 3rd party components provide the component itself, not a module.
That way, I can use that component in entryComponents, and declare this code in my AppModule:
public ngDoBootstrap() {
angular.module('').directive('fields', downgradeComponent({
component: FieldsComponent
}) as angular.IDirectiveFactory);
}
I tried this PR (#48) but the problem is that if I export the component separately, it seems to be an issue:
Component is part of the declaration of 2 modules
How can I easily solve this?
Hi,
The element structure that you generate is
<ngx-avatar>
<div>
<div>
</div>
</div>
</ngx-avatar>
You apply the styling on both <div>
elements, which is unnecessary and creates undesired effects when for instance I set the border gray it renders both <div>
elements with gray border (example below). Applying only on one of them seems the right way to do it.
Also, I think you should give each <div>
a CSS class name to provide maximum customization power.
See right avatar:
Styling with [style] attribute:
{
backgroundColor: "#ffffff",
border: "1px solid #7e7e7e",
borderRadius: "50%",
color: "#7e7e7e",
cursor: "pointer"
}
I'm able to use ngx-avatar fine but Visual Studio Code (version: 1.20.0-insider) shows this error:
[ts] Module '"c:/User/abc/ui/node_modules/ngx-avatar/ngx-avatar"' has no exported member 'AvatarModule'.
When looking at this component on https://www.npmjs.com/package/ngx-avatar there is no repository/github link.
Could you use the new Http module from angular 4.3+ @angular/common/http (HttpClientModule) instead of @angular/http (HttpModule) ?
Hi,
It will be nice to have the same color returned for the same text value.
It could be done by calculcing a hash of the value :
(from https://github.com/mumairofficial/text-avatar )
export class ColorGenerator {
COLORS: any[] = ['#e57373'/*, list of colors */ ];
public getColor(str: string): string {
return this.COLORS[Math.abs(this.toNumber(str)) % this.COLORS.length];
}
private toNumber(str: string): number {
let h = 0;
for (let i = 0; i < str.length; i++) {
h = 31 * h + str.charCodeAt(i);
h |= 0; // Convert to 32bit integer
}
return h;
};
}
Vincent
First, thank u for this library, good job. It's saving me a lot of time.
I'm facing an issue, I will try to explain it. In my app (Ionic3/Angular5), I have injected the HttpClientModule
in the root module, aka AppModule
, with a few HTTP interceptors.
Then I have a feature module (lazy loaded) where I'm using ngx-avatar
. It is working but the services I have in that module stop working after adding the AvatarModule
. They are not using the HTTP interceptors anymore.
I've forked your repo and seems it's because the AvatarModule
is importing also the HttpClientModule
so there are 2 instances in the angular dependency injection system and the feature module is using the one provided by the AvatarModule
.
I have a patch removing the import for the HttpClientModule
in the AvatarModule
and everything works again. I can send a PR if you agree.
thx
In a project I am working on, I want to users to be able to choose their own image as avatar, and use the "initials avatar" if they don't have an image. I also want them to be able to remove an image.
When removing the image, src
is updated to null
. This does not update the avatar, and the image is still showing.
I have made a StackBlitz demo demonstrating my issue.
I use the following workaround right now, but I think this is something the component should be able to handle internally:
<ngx-avatar *ngIf="src; else initialsAvatar" [src]="src" [name]="name" [size]="size"></ngx-avatar>
<ng-template #initialsAvatar>
<ngx-avatar [name]="name" [size]="size"></ngx-avatar>
</ng-template>
Add Support to Vk.com ( vkontakte ) as an avatar source
When network is not very fast, the image don't load immediately and the avatar appears blank. Should have a feature that will load the Initials by default and then replace by the src or other sources when loading is complete.
Hi,
I was setting ngx-avatar's name attribute to my user's Full Name. I get some errors like toUpper case is not a function. Then I realized ngx-avatar splitting the name by whitespace, and some of my users have whitespace in leading in their names. So an error occurs.
Maybe I am the one who should trim the name before saving to the db but also it can be added to the library.
Thank you
Not working with rxjs 6.0.
Currently, the colors for the generated avatars are internal to the application.
While it is possible to use
import { defaultColors } from "ngx-avatar";
defaultColors.splice(0, defaultColors.length);
defaultColors.push("red", "green", "blue");
to change them, this has a hacky feel to it.
There should be a nicer, more straightforward way to set the avatar colors.
Hi, I've got error when building production app (ng build --prod
) with ngx-avatar 3.0.0. The error message is:
ERROR in : Unexpected value 'AvatarModule in C:/path/node_modules/ngx-avatar/ngx-avatar.d.ts' imported by the module 'XXX in C:/path/XXX/XXX.module.ts'. Please add a @NgModule annotation.
Environment:
@angular/[email protected]
@angular/[email protected]
[email protected]
Please help.
Right now, the code that handles the async avatar sources is half in the relevant class, i.e. google.ts
, and half in a method in utils.ts
(_extractGoogleAvatar
).
Also, the definition of which sources are async, and which are direct is held in utils.ts
.
It would be better if that definition, as well as the handling is moved to the relevant class.
I started using ngx-avatar recently in our project as it seemed to match all our requirements.
But I see that currently application of custom styling is through style
property in ngx-avatar. There is no provision to accept css classes for this. We use variables in our scss classes and it would nice to reuse them for the custom styling of ngx-avatar as well. So it would be great to accept css classes also apart from the style
property.
Due to the current approach of hard-coding the style in the component, we get the following warning as well.
WARN: 'WARNING: sanitizing unsafe style value [object Object] (see http://g.co/ng/security#xss).'
In order to improve the component code and to reduce potential bugs and also to make it easy to maintain we need to cover the ngx-avatar component with unit test.
So much thanks if you add the Mistery man and not a 404 broken image
I am using Angular 8
and followed a similar approach as mentioned in the document.
I am getting below mentioned errors
ERROR in ../node_modules/ngx-avatar/lib/avatar-config.token.d.ts(1,32): error TS2307: Cannot find module '@angular/core'.
../node_modules/ngx-avatar/lib/avatar.component.d.ts(1,78): error TS2307: Cannot find module '@angular/core'.
../node_modules/ngx-avatar/lib/avatar.module.d.ts(1,37): error TS2307: Cannot find module '@angular/core'.
../node_modules/ngx-avatar/lib/avatar.service.d.ts(1,28): error TS2307: Cannot find module '@angular/common/http'.
../node_modules/ngx-avatar/lib/avatar.service.d.ts(2,28): error TS2307: Cannot find module 'rxjs'.
It could be very usefull if we could configure the priprity list
name with extra spaces breaks the avatar preview, this can be fixed from my code if i take care of the extra spaces.
If you can fix it as part of framework that will be great :)
<ngx-avatar size="50" name="Haithem Mosbahi " ></ngx-avatar>
- ending with extra space
<ngx-avatar size="50" name="Haithem Mosbahi" ></ngx-avatar>
- extra space between the words
<ngx-avatar size="50" name=" Haithem Mosbahi" ></ngx-avatar>
- leading extra space
Currently ngx-avatar tries to load the same (not available) avatars over and over again, spamming the console and request log with 404s.
It would be very nice, if this component would cache which sources resulted in "Not Found" and not retry them.
Especially as are within a SPA, it's unexpected to get the same errors multiple times.
Due to the sources are being sorted by their value (sourceId
) instead of type (sourceType
). This pull request #21 fixes this.
Please check it out.
@HaithemMosbahi please add some maintainer if you won't maintain the package anymore, thx.
I could not get the avatar updated after some changes in the user data. For example, when I load the avatar initially there is no picture which makes it falls back to initials. Later, when a profile picture is added, I need to update the avatar with that image URL. This is not happening now.
Could anyone please help me in getting this done?
Thanks in advance.
This is about fixing the travis build
There isn't a clear instruction for how to build... ng build gets this error
src/app/app.module.ts(5,30): error TS2307: Cannot find module 'ngx-avatar'.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.