компонент chat-contact-avatar

chat-contact-avatar.html

div class="avatar" [ngClass]="[size ? 'avatar_size_' + size : '', sidebar ? 'avatar_sidebar' : '']">
    <img class="avatar__photo" *ngIf="contactAvatar" [src]="contactAvatar">
    <div class="avatar__initials" *ngIf="initials" [style.background-color]="initialsColor">
        {{ initials }}
    </div>
    <mat-icon class="avatar__empty" *ngIf="!contactAvatar && !initials">account_circle</mat-icon>
</div>

chat-contact-avatar.scss

@import '../../config';

.avatar
{
    position: relative;

    overflow: hidden;

    user-select: none;

    border-radius: 50%;

    user-drag: none;


    &_sidebar
    {
        border: 2px solid $blue_light_2;
    }

    &__photo
    {
        width: 100%;
        height: auto;
    }

    &__empty
    {
        position: absolute;

        text-align: center;
    }

    &__initials
    {
        font-weight: normal;

        width: 100%;
        height: 100%;

        text-align: center;

        color: $white;
    }

    &_size
    {

        &_l
        {
            width: 75px;
            height: 75px;
            margin: 0 auto;

            .avatar
            {
                &__empty
                {
                    font-size: 80px;
                    line-height: 80px;

                    top: -5px;
                    right: -5px;
                    bottom: -5px;
                    left: -5px;
                }

                &__initials
                {
                    font-size: 42px;
                    line-height: 80px;
                }
            }
        }

        &_m
        {
            width: 50px;
            height: 50px;

            .avatar
            {
                &__empty
                {
                    font-size: 60px;
                    line-height: 60px;

                    top: -5px;
                    right: -5px;
                    bottom: -5px;
                    left: -5px;
                }

                &__initials
                {
                    font-size: 25px;
                    line-height: 52px;
                }
            }
        }

        &_s
        {
            width: 40px;
            height: 40px;

            .avatar
            {
                &__empty
                {
                    font-size: 48px;
                    line-height: 48px;

                    top: -4px;
                    right: -4px;
                    bottom: -4px;
                    left: -4px;
                }

                &__initials
                {
                    font-size: 20px;
                    line-height: 42px;
                }
            }
        }

        &_xs
        {
            width: 24px;
            height: 24px;

            .avatar
            {
                &__empty
                {
                    font-size: 30px;
                    line-height: 29px;
                    top: -2px;
                    right: -2px;
                    bottom: -2px;
                    left: -3px;
                }

                &__initials
                {
                    font-size: 11px;
                    line-height: 24px;
                }
            }
        }
    }
}

chat-contact-avatar.ts

import {Component, Input, OnInit, OnChanges,SimpleChanges} from '@angular/core';
import {Contact, ContactType} from '../contact/contact.model';
import {getAvatarInitials, getAvatarColor} from '../util/base64';

@Component({
  selector: 'app-chat-contact-avatar',
  templateUrl: './chat-contact-avatar.component.html',
  styleUrls: ['./chat-contact-avatar.component.scss']
})
export class ChatContactAvatarComponent implements OnInit, OnChanges {
  @Input() contactAvatar: string;
  @Input() contactName: string;
  @Input() size: string = 'm';
  @Input() sidebar: boolean;
  initials: string;
  initialsColor: string;

  ngOnInit() {
    if (this.contactAvatar == 'null') {
      this.contactAvatar = null;
    }
    this.ngOnChanges(undefined);
  }

  ngOnChanges(changes: SimpleChanges){
    if (!this.contactAvatar && this.contactName) {
      this.initials = getAvatarInitials(this.contactName);
      this.initialsColor = getAvatarColor(this.initials);
    }
  }
}