File
Metadata
| selector |
app-contact-person-card |
| styleUrls |
./contact-person-card.component.scss |
| templateUrl |
./contact-person-card.component.html |
import { Component, Input } from '@angular/core';
import { ContactPerson } from 'src/app/core/data/models/contact-person.model';
@Component({
selector: 'app-contact-person-card',
templateUrl: './contact-person-card.component.html',
styleUrls: ['./contact-person-card.component.scss'],
})
export class AuditContactPersonCardComponent {
@Input() contactPerson: ContactPerson;
constructor() {}
}
<p class="subtitle-2 mb-2" data-cy="contact-name">
{{ contactPerson.forename + ' ' + contactPerson.surname }}
</p>
<div class="wrapper-contact-person-details">
<div>
<label class="label" data-cy="contact-companyname">Unternehmen</label>
<p class="subtitle-2" data-cy="contact-companyname-entry">{{ contactPerson.companyName }}</p>
</div>
<div>
<label class="label" data-cy="contact-department">Abteilung</label>
<p *ngIf="contactPerson.department; else missing" class="subtitle-2" data-cy="contact-department-entry">{{ contactPerson.department }}</p>
</div>
<div>
<label class="label" data-cy="contact-division">Unternehmensbereich</label>
<p class="subtitle-2" data-cy="contact-division-entry">{{ contactPerson.corporateDivision }}</p>
</div>
<div>
<label class="label" data-cy="contact-sector">Branche</label>
<p *ngIf="contactPerson.sector; else missing" class="subtitle-2" data-cy="contact-sector-entry">{{ contactPerson.sector }}</p>
</div>
<ng-template #missing>
<p class="subtitle-2" data-cy="missing">-</p>
</ng-template>
</div>
@import '../../../../../sass/utils';
.wrapper-contact-person-details {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0 10px;
@media screen and (max-width: 600px) {
grid-template-columns: repeat(2, 1fr);
}
}
:host {
width: 100%;
position: relative;
}
.action-bar {
position: absolute;
top: 0;
right: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 10px;
}
Legend
Html element with directive