Есть ли лучший способ для этого компонента пользовательского интерфейса?

Мне нужно создать компонент для отображения списка пользователей-аватаров …. Если количество пользователей в массиве превышает 3, я должен отобразить число, чтобы указать оставшееся количество пользователей.

Пример:

[{id:1, name: 'Paul', surname: 'Rudd'}, {id:2, name: 'Rose', surname: 'Pink'}, {id:3, name: 'Richard', surname: 'Gere'}, {id:4, name: 'Anna', surname: 'Ross'}, {id:5, name: 'Raphael', surname: 'Bublè'},{id:6, name: 'Gene', surname: 'Hoffman'},{id:7, name: 'Anthony', surname: 'Florence'}]

Мне нужно увидеть 3 изображения аватара с первой буквой имени и фамилии:

ПР, РП, РГ 4+

Это моя составляющая:

    @Component({
      selector: 'mgg-users-detail',
      templateUrl: './users-detail.component.html',
      styleUrls: ['./users-detail.component.scss'],
    })

    export interface users {
      id: number;
      name: string;
      surname: string;
    }
    export class UsersDetailComponent implements OnInit {
      @Input()
      collaborators: users[]
        
      constructor() {}

      ngOnInit(): void {}

    }

и это HTML:

    <div *ngIf="users && users.length > 1">
        <div *ngFor="let user of users; index as i">
          <img
            *ngIf="i <= 2"
            [src]="'https://dummyimage.com/50x50/6ECFDB/fff&text=" + collaborator.name[0] + collaborator.surname[0]"
          ></img>
        </div>
        <img
          *ngIf="users.length > 3"
          [src]=""https://dummyimage.com/50x50/6ECFDB/fff&text=" + (users.length - 3)"
        >
        </img>
    </div>

Могу ли я улучшить код другим способом?