-3

enter image description hereenter image description here

like this I need to make.

I tried like this..

I tried it using mat-avatar, putting all the avatar inside a div so that it get compact and overlaps each other.

Community
  • 1
  • 1
Rahul Kumar
  • 17
  • 7

1 Answers1

0

To solve this problem I couldn't find any angular plug-in but using CSS I was able to do the same. I found that resource on stack overflow only. And from Angular I restricted the image Icon to show three avatars only and rest will be as (+x more) like (+10 more) or (+11 more) depending upon the total number of data fetched.It will look somthing like this..

CSS

   .avatar-icons {
        display: inline-block;
        transform: scale(1, 1);
        padding-left: 35px;
        /* padding-bottom: 10px; */
    }

    .avatar-i {
        margin-left: -25px;
        position: relative;
        display: inline-block;
        border: 1px solid #fff;
        border-radius: 50%;
        overflow: hidden;
        width: 2.4em;
        height: 2.4em;
    }

    .avatar-i img {
        width: 50px;
        height: 50px;
        transform: scale(1, 1);
    } 

.avatar-count {
    padding-top: 16px;
    padding-left: 4px;
    font-size: 13px;
}

Angular Code

<div *ngIf="componentName=='dashboard'">
        <div matTooltip="People who attempted quiz" class="avatar-icons" *ngIf="quiz.arrayOfImageUrls !=null">
          <div *ngIf="quiz.arrayOfImageUrls.length >3 ; else elseBlock" class="avatar-icon">
            <span class="avatar-i" *ngFor="let avatarUrl of quiz.firstThreeAvatarIcon">
              <img src="{{avatarUrl}}">
            </span>
            <span class="avatar-count" *ngIf="quiz.arrayOfImageUrls.length > 3">
              + {{quiz.arrayOfImageUrls.length - 3 }} more
            </span>
          </div>
          <ng-template #elseBlock>
            <span class="avatar-i" *ngFor="let avatarUrl of quiz.arrayOfImageUrls">
              <img src="{{avatarUrl}}">
            </span>
          </ng-template>
        </div>
      </div>

Source link from where I took help from :- Overlapping/overlaying multiple inline images

Rahul Kumar
  • 17
  • 7