src/app/features/contact-persons/contact-persons.component.ts
| selector | app-contact-persons-list |
| styleUrls | ./contact-persons.component.scss |
| templateUrl | ./contact-persons.component.html |
Properties |
Methods |
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| contactPersons$ |
Type : Observable<ContactPerson[]>
|
Decorators :
@Select(ContactPersonState.contactPersons)
|
import { Component, OnInit } from '@angular/core';
import { Select } from '@ngxs/store';
import { Observable } from 'rxjs';
import { ContactPerson } from 'src/app/core/data/models/contact-person.model';
import { ContactPersonState } from 'src/app/core/ngxs/contact-person.state';
@Component({
selector: 'app-contact-persons-list',
templateUrl: './contact-persons.component.html',
styleUrls: ['./contact-persons.component.scss'],
})
export class ContactPersonsComponent implements OnInit {
@Select(ContactPersonState.contactPersons) contactPersons$: Observable<ContactPerson[]>;
ngOnInit() {}
}
<header class="grid-1-auto-auto mb-2">
<h4 data-cy="heading">Kontakt</h4>
<a routerLink="new" hero size="medium" nbButton status="primary" data-cy="new-contact">
<nb-icon icon="person-add-outline"></nb-icon>
Neue Person
</a>
</header>
<div *ngIf="contactPersons$ | async as contactPersons; else noContactPersons">
<nb-card fullWidth>
<nb-card-header>Registrierte Kontaktpersonen ({{ contactPersons.length }})</nb-card-header>
<nb-card-body>
<nb-list>
<nb-list-item *ngFor="let contactPerson of contactPersons">
<app-contact-person-card [contactPerson]="contactPerson" data-cy="contact-person-card"></app-contact-person-card>
</nb-list-item>
</nb-list>
</nb-card-body>
</nb-card>
</div>
<ng-template #noContactPersons>
<div class="hint-no-contact-persons text-hint">
<h6 class="text-hint">Keine Kontaktpersonen registriert</h6>
</div>
</ng-template>
<nb-layout>
<router-outlet></router-outlet>
</nb-layout>
./contact-persons.component.scss
@import '../../../sass/utils';
.hint-no-contact-persons {
max-width: 900px;
margin: 100px auto 0 auto;
text-align: center;
}
nb-card-body {
padding: 0;
}