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

<div class="card">
    <div class="card-body row">
        <div class="col-8">
            <h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
            <dl>
                <dt>Position:</dt>
                <dd>{{ contact.position }}</dd>
                <dt>Telefon:</dt>
                <dd>{{ contact.phone }}</dd>
                <dt>E-Mail:</dt>
                <dd><a href="mailto:{{contact.email}}">{{ contact.email }}</a></dd>
                <dt>Geburtstag:</dt>
                <dd>{{ contact.birthday | date:'dd.MM.YYYY' }}</dd>
            </dl>
        </div>
        <div class="col-4">
            <img *ngIf="contact.imageUrl !== null" src="{{environment.basePath}}{{contact.imageUrl}}" width="247"
                 height="94"
                 alt="{{contact.firstName}} {{contact.lastName}}" title="{{contact.firstName}} {{contact.lastName}}"/>
        </div>
    </div>
</div>

<div class="posts">
    <div class="d-flex justify-content-between align-items-start">
        <h2>Notizen</h2>
        <button (click)="openModalNewPosting()">Neue Notiz</button>
    </div>
    <div *ngFor="let post of posts">
        <div class="post mb-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <p>{{ post.createdAt | date:'dd.MM.YYYY hh:mm' }}</p>
                        <p>{{ post.ownerName }}</p>
                    </div>
                    <div>
                        <h3>{{ post.headline }}</h3>
                        <p>{{ post.message }}</p>
                    </div>
                </div>
            </div>
            <div class="card ms-5">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <p>04.10.2023</p>
                        <p>Jan Hansen</p>
                    </div>
                    <div>
                        <p>Leider geht er mobil selten dran. Eher E-Mails schicken!</p>
                    </div>
                </div>
            </div>
            <div class="card ms-5">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <p>02.10.2023</p>
                        <p>Florian Eisenmenger</p>
                    </div>
                    <div>
                        <p>Ich habe mit FAX die besten Erfahrungen gemacht...</p>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-end">
                <a routerLink="#" class="badge bg-secondary">Kommentieren</a>
            </div>
        </div>
    </div>
    <mat-paginator *ngIf="posts.length > 0" class="mb-4" [length]="postsLength"
                   (page)="postsHandlePageEvent($event)"
                   [pageSize]="postsPageSize"
                   [pageIndex]="postsPageIndex"
                   showFirstLastButtons>
    </mat-paginator>
</div>