Директива об отступлении изображения в angular

Question

Я получаю список пользователей из базы данных, и я использую ngFor для l oop через этот массив пользователей. У некоторых пользователей есть фотография профиля, у некоторых - нет. Как я могу создать пользовательскую директиву, если у пользователя не выбрано изображение или URL-адрес изображения поврежден, тогда в блоке изображения профиля будут отображаться имя пользователя и первые две буквы фамилии, как в skype . Как Джон Део будет JD .

<li class="single-user" *ngFor="let user of users">
    <div class="single-user-inner">
        <div class="single-user-top">
            <div class="user-image">
                <img src="{{ user.profile_pic }}" alt="" width="70" height="70" >
            </div>
            <div class="user-name">
                <ng-container>
                    <div class="user-role" *ngIf="user.role == 3">pet owner</div>
                    <div class="user-role" *ngIf="user.role == 2">employee</div>
                    <div class="user-role" *ngIf="user.role == 1">manager</div>
                </ng-container>
                <h3>{{ user.name }}</h3>
                <a href="mailto:{{ user.email }}">{{ user.email }}</a>
            </div>
        </div>
        <div class="single-user-mid">
            <p><span>added on : </span>{{ user.created_at * 1000 | date:'d MMM, y | hh:mm a' }}</p>
        </div>
        <!-- Jan 15, 2019 | 21.08 -->
        <div class="single-user-bot">
            <p>status</p>
            <div class="checkbox switcher">
                <label [for]="user.id">
                    <input type="checkbox" [id]="user.id" [checked]="user.active_status == 1 ? 'checked' : ''" (change)="changeStatus($event, user.id)" />
                    <span><small></small></span>
                </label>
            </div>
        </div>
    </div>
</li>