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">
<!--                            TODO: contactPartnerProduct.productName ist falsch, hier muss die ID rein -->
                            <li><a href="/products/{{this.appHelperService.extractId(contactPartnerProduct.product?.id)}}">{{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>