matsen-tool-fe/matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html

<div *ngIf="contact" class="spt-container">
    <div class="card contacts-detail">
        <div class="card-body row">
            <div class="spt-col col-12 col-sm-6 col-lg-8">
                <div class="row">
                    <div class="col-12 col-lg-6">
                        <h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
                        <dl>
                            <dt *ngIf="contact.position">{{ 'form.position' | translate }}:</dt>
                            <dd *ngIf="contact.position">{{ contact.position }}</dd>
                            <dt *ngIf="contact.phone">{{ 'form.phone' | translate }}:</dt>
                            <dd *ngIf="contact.phone">{{ contact.phone }}</dd>
                            <dt *ngIf="contact.email">{{ 'form.email' | translate }}:</dt>
                            <dd *ngIf="contact.email"><a href="mailto:{{contact.email}}">{{ contact.email }}</a></dd>
                            <dt *ngIf="contact.birthday">{{ 'form.birthday' | translate }}:</dt>
                            <dd *ngIf="contact.birthday">{{ contact.birthday | date:'dd.MM.YYYY' }}</dd>
                        </dl>
                    </div>
                    <div class="col-12 col-lg-6">
                        <ul *ngFor="let contactPartnerProduct of contactPartnerProducts">
                            <li>
                                <a href="{{ appHelperService.getResourceLink(contactPartnerProduct.product) }}">{{ contactPartnerProduct.product?.name }}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-4 has-image">
                <img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined" src="{{contact.imageUrl}}"
                     width="247" height="94"
                     alt="{{contact.firstName}} {{contact.lastName}}"
                     title="{{contact.firstName}} {{contact.lastName}}"/>
                <img *ngIf="contact.imageUrl === null || contact.imageUrl === undefined"
                     src="/assets/images/icons/dummy-person.png" width="247" height="94" alt=""/>
            </div>
            <span class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"
                  (click)="openModalEditContact()">
            </span>
        </div>
    </div>
</div>
<app-toggle #togglePosts [headline]="'basic.posts' | translate">
    <app-post-list *ngIf="togglePosts.isOpened" #postListComponent
                   [partner]="partner"
                   [contact]="contact"
    ></app-post-list>
</app-toggle>
<app-toggle #toggleProducts [headline]="'basic.products' | translate">
    <app-product-list *ngIf="toggleProducts.isOpened" #productListComponent
                      [contact]="contact">
    </app-product-list>
</app-toggle>