How to create round colored avatars with user initials?-CodePudding

I am using Ionic Angular for App development. Whats the best way to create round colored avatars with the initials of a user for example for a contact list. Something like this:

Thanks in advance! Cheers

CodePudding user response：

Create a function in .ts file:

 getInitials(firstName:string, lastName:string) {
    return firstName[0].toUpperCase()   lastName[0].toUpperCase();
  }

call the getInitials function in .html file:

<div >
  <div > {{getInitials('john','doe')}}</div>
  <br>
  <div > {{getInitials('john','doe')}}</div>
  <br>
  <div > {{getInitials('john','doe')}}</div>
  <br>
  <div > {{getInitials('john','doe')}}</div>
  <br>
  <div > {{getInitials('john','doe')}}</div>  
</div>

and add this snippet in your .scss file:

$colors: #a2b9bc,#6b5b95,#feb236, #d64161, #ff7b25, #b2ad7f,  #878f99;

.avatar {
    color: #fff; 
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:100%;
    width:50px;
    height: 50px;
    font-weight: 600;
  }

  @for $i from 1 through length($colors) {
    .avatar:nth-child(#{length($colors)}n #{$i}) {
        background: lighten(nth($colors, $i), 20%);
    }
}

Here is the result:

CodePudding user response：

it's only css, e.g.

.avatar{
  width:3rem;        //<--use the size you choose
  border-radius:100%;
  text-align: center;
  background-color: pink;
}
.avatar span{
  line-height: 3rem; //<--see that it's the same size than the width
  color:red;
}

<div >
  <span>AB</span>
</div>

You can also define an array of "avatars"

  avatars=[{label:"AB",background:"LightGreen",color:"forestgreen"},
           {label:"WD",background:"lightsteelblue",color:"steelblue"}]

And write

<div *ngFor="let avatar of avatars"  
        [style.background-color]="avatar.background">
  <span [style.color]="avatar.color">{{avatar.label}}</span>
</div>

See a simple stackblitz