haithemmosbahi / ngx-avatar Goto Github PK

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'.

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

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,

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

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>

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.

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'.

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,

Using version 2.2.0 (latest). I get an error when my app loads:

In one of my modules I did:
import { AvatarModule } from "ngx-avatar";
@NgModule({ imports: [... AvatarModule],

Using Angular 4.3.0
Webpack (1.13.0) says Compiled successfully.

Any idea? Thanks!

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).'

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

Add Support to Vk.com ( vkontakte ) as an avatar source

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.

It could be very usefull if we could configure the priprity list

@HaithemMosbahi please add some maintainer if you won't maintain the package anymore, thx.

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?

@HaithemMosbahi

Would it be feasible to add a tooltip that shows the name / email / whatever info is convenient?

Thanks, Chad

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"
}

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

When looking at this component on https://www.npmjs.com/package/ngx-avatar there is no repository/github link.

Hi @HaithemMosbahi

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

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'.

This is about fixing the travis build

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.

Add a source for GitHub avatar pictures.

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

Not working with rxjs 6.0.

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\...'

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

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; }); }

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?

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.

So much thanks if you add the Mistery man and not a 404 broken image

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.

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!

There seems to be a bug where the vertical alignment is incorrect in Firefox, but correct in Chrome.

Here is an example of the same ngx-avatar with the same code running on two different browsers:

Firefox:

Chrome:

This is even more visible when we have a list of them aligned:

Firefox:

Chrome:

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.

I want it to squeeze to be square.

both are set like this :

<ngx-avatar src="{{company.logoLink}}" name="{{company.name}}"
initialsSize="3" size="40" [round]="true">

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.

Is there any option to restrict it to show just 2 characters in avatar?

1).avatar .avatar-container{
height:60px ;
width: 60px ;
}

2. .avatar .avatar-content{
   height: 60px ;
   width:60px ;
   }

which one is correct?

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.

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.

Could you use the new Http module from angular 4.3+ @angular/common/http (HttpClientModule) instead of @angular/http (HttpModule) ?

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