Hey!

Awesome work! How can I add digit and symbols support to this?

Thanks!!

Hi i made a change in the library....
/**

var l=r.data.replace(/[^A-Z]/g, '').toUpperCase()

**/

to get first name and last name its working fine for me..please let me know its fine to use like this.

set image url in data doesn't work like the demo shows

Could you publish to npm?

Hi, this module is a perfect fit for Ionic. After small changes I'm using it in one my project and it works like a charm. But there are two small complains that can be solved in about 5 LOCs.

• First obvious change is the use of jQuery. I know you are using this with Bootstrap but once you change all the $ for angular.element all the code is no more dependent on jQuery.
• Ionic uses avatars, but expects just plain <img>'s without all the wrappers. Thus the very end of the link function to be changed to mimic the deprecated (?) replace:true directive behavior. Simply
  
  <ng-letter-avatar data="Zimbra"></ng-letter-avatar>
  should compile just into
  
  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo..." style="">

Any of those changes should not harm your project, but Im not aware of the whole context. Do you want me to PR my changes or I should just fork into a ngletteravatar for Ionic?

Hi!

Your library is really great! But do you have a option when the user, for example, has a profile pricture?

Like Gmail, when don't have picture, put the LETTER, but when have, put the PICTURE.

The idea is use the same configuration for both cases, and don't generate a new code when we have a picture.

I am using the below code to have the colors for the alphabets.

<ng-letter-avatar class="pic" height="45" width="45" alphabetcolors="customColors" data="{{rangoli.userId.displayname}}" charCount="2" shape="round"></ng-letter-avatar>

But the colors are always the default one. Anything wrong here?

The color codes are below:

  $scope.customColors = ["#D93A37", "#5A8770", "#5A8770", "#5A8770", "#5A8770", "#5A8770", "#5A8770", "#5A8770", "#5C9BBC", "#F5888D",
    "#9A89B5", "#407887", "#9A89B5", "#5A8770", "#D33F33", "#A2B01F", "#F0B126", "#0087BF", "#F18636", "#0087BF", "#B2B7BB", "#72ACAE",
    "#9C8AB4", "#5A8770", "#EEB424", "#407887"
  ];

Hi I think your directive is really helpful.
However, I had some requirements in terms of how it would behave for example I wanted different display for different naming type:

• uttesh Ranjit UR
• Aidan Vandier Sat ==> AV
• Gael Magma Do Borneo ==> GM
• Adrian Di Bisumbio ==> AB
• Antoine ==> AN
• Antoine Kouroki ==> AK
• Adrien Kou ==> AK
  for that I built and tested this function:

function determineCharacterNumbers(isMultiple, avatarData, charCount){
            var words = [],
                valReturn = null;
            if(!isMultiple){
                valReturn = avatarData.substr(0, charCount).toUpperCase();
            }
            else{
                words = avatarData.split(" ");
                for (var i = 0; i < words.length; i++) {
                    if(words.length >= 2){
                        // we pop particle names "De", "Of", "The", "Van" etc...
                        if((i != 0) && ( words[i].length === 2 || words[i].length === 3)){
                            if(i != words.length - 1){
                                words.splice(i,1);
                            }
                        }
                        words[i] = words[i].substr(0,1).toUpperCase();
                    }
                };
                // we add something like ['A', 'V'] that becomes AV
                valReturn = words.join('').substr(0, charCount).toUpperCase();
            }
            return valReturn;
        }

// and in the link function
var c = determineCharacterNumbers(params.multiWord, params.data, params.charCount);

The code might not be the most efficient but it does the job, if you are okay with it I was wondering if it could be added to your directive?

Hey,

I'm trying to add border, but it shows only top and left
Can you assist, please?

}).css({
                                        'background-color': color,
                                        'width': width+'px',
                                        'height': height+'px',
                                        'border' : 'solid 5px',
                                        'border-bottom-style': 'dotted'
 });

Am using rooney sans font from the adobe typekit ,when i tried to give that in the fontFamily attribute it doesn't took it.

Hello,

Is there easy way to convert to pictures those nice generated letters?
I'm thinking about print-screening square ones, but that's too bad approach..

Thanks!

upd: Basically a can do save as letters as svg vector image with transparent background, and then add appropriate background in image editor, which sounds like better approach. Not sure saving can be done with background image color..

Hi,

Could you create a version JS only? Like foe people who dont use angular. Please :)

Right now its not possible to change the color of the text but I found the solution, the line 51 in the ngletteravatar.js should be replaced by:
textColor: attrs.textcolor || defaultSettings.textcolor,
so it takes the color we send correctly.

Hi Uttesh,

The following line works fine, where post.name is a $scope variable.

However, if I replace the $scope variable with a $scope function, it doesn't work.

Is it a bug or limitation? Anyway I can tweak to achieve the second method?

Thank you,
Sem

You seem to have left out the letter "G" (at least in the demo images).

ex: ng-letter-avatar(data="{{vm.selected.username}}")

when vm.selected changed, avatar still show the old one.

I suggest changing the default setting for the border-radius to: 'border-radius:50%;'. This way it will always be a completly round shape.

The way it is now, it renders as squares with rounded corners when the size gets bigger (ie 120x120).

Hello,

The title says it all. While using the following in a package.json: ~4.0.1

the last time I did a bower install (today 13/07/2016) our application was broken since the min.js script couldn't be found since there is no dist directory.

Hopefully you can correct this before our client does their bower install :o/

as the title says

Hello,

Could you publish the latest version (4.0.2) on npm repo?
I'm getting the version 4.0.0 as the most recent.

Thank you!

I am trying to use the component in a phonegap application on angular but for some reason the letters do not display. The circle does display.

If i apply custom simple css, its not work.

<ng-letter-avatar data="uttesh" style="margin-left: 48%"></ng-letter-avatar>

Width property don't take % only px

<ng-letter-avatar data="uttesh" width="100%"></ng-letter-avatar>

dynamic="true" works but ignore or break parent css. Some time shape round is not work when dynamic="true".

Its very nice avatar. Thaks and please update.

I am using ui-router and in state A I have an avatar (code below). Whenever I navigate through different states I see that I lose the avatar.

<ng-letter-avatar data="{{vm.user.username}}" shape="round" dynamic="true" fontsize="60" width="100" height="100"></ng-letter-avatar>

Is there a way to reload the avatar ?

Hi,
I am trying to achieve it inside a modal view but its not working.
The data attribute is not taking the scope value.
Its working under normal view

<ion-modal-view>
     <ion-header-bar class="bar bar-header">
          <h1 class="title">Employee Details</h1>
          <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
        </ion-header-bar>
    <ion-content has-header="true" padding="true">
        <div class="list card">
              <div class="item item-avatar">
                <ng-letter-avatar charCount="2" fontSize = "25px" avatarborder="true" avatarcustombgcolor="green" data={{employee.fullName}} shape="round"></ng-letter-avatar>
                <div class = "empname">{{employee.firstName}} {{employee.lastName}}</div>
                <p>{{employee.title}}</p>
            </div>
            <a class="item item-icon-left" href="#/employees/{{employee.managerId}}" ng-if="employee.managerId > -1"><i class="icon ion-ios7-person"></i>View Manager<p>{{employee.managerName}}</p></a>
            <a class="item item-icon-left" href="#/employees/{{employee.id}}/reports" ng-if="employee.reports > 0"><i class="icon ion-person-stalker"></i>View Direct Reports<p>{{employee.reports}}</p></a>
            <a class="item item-icon-left" href="tel:{{employee.officePhone}}"><i class="icon ion-ios7-telephone"></i>Call Office<p>{{employee.officePhone}}</p></a>
            <a class="item item-icon-left" href="tel:{{employee.cellPhone}}"><i class="icon ion-ios7-telephone"></i>Call Cell<p>{{employee.cellPhone}}</p></a>
            <a class="item item-icon-left" href="sms:{{employee.cellPhone}}"><i class="icon ion-chatbox-working"></i>SMS<p>{{employee.cellPhone}}</p></a>
            <a class="item item-icon-left" href="mailto:{{employee.email}}"><i class="icon ion-ios7-email"></i>Email<p>{{employee.email}}</p></a>
        </div>

    </ion-content>
</ion-modal-view>

Looks like G letter is missing ;-)