Детальный просмотр мастера jHipster

Question

Я новичок в jHipster. Я сгенерировал новый проект и создал 2 объекта - клиента и его посещения. Я хотел бы реализовать следующие функциональные возможности: в нижней части страницы сведений о клиенте будут отображаться все его посещения. Буду благодарен за советы, ссылки на руководства. Спасибо! Это часть структуры проекта

клиент-detail.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { IClient } from 'app/shared/model/client.model';
import {VisitComponent} from "app/entities/visit";

@Component({
  selector: 'jhi-client-detail',
  templateUrl: './client-detail.component.html'

})
export class ClientDetailComponent implements OnInit {
    client: IClient;
    visitList: VisitComponent;

    constructor(protected activatedRoute: ActivatedRoute) {}

    ngOnInit() {
    this.activatedRoute.data.subscribe(({ client,visitList }) => {
        this.client = client;
        this.visitList = visitList;
    });
}

    previousState() {
        window.history.back();
   }
}

клиент-detail.component.html

<div class="row justify-content-center" xmlns:trackBy="http://www.w3.org/1999/xhtml">
<div class="col-8">
    <div *ngIf="client">
        <h2><span>Client</span> {{client.id}}</h2>
        <hr>
        <jhi-alert-error></jhi-alert-error>
        <dl class="row-md jh-entity-details">
            <dt><span>Name</span></dt>
            <dd>
                <span>{{client.name}}</span>
            </dd>
            <dt><span>Birth Date</span></dt>
            <dd>
                <span>{{client.birthDate}}</span>
            </dd>
            <dt><span>Phone Number</span></dt>
            <dd>
                <span>{{client.phoneNumber}}</span>
            </dd>
        </dl>


        <button type="submit"
                (click)="previousState()"
                class="btn btn-info">
            <fa-icon [icon]="'arrow-left'"></fa-icon>&nbsp;<span> Back</span>
        </button>

        <button type="button"
                [routerLink]="['/client', client.id, 'edit']"
                class="btn btn-primary">
            <fa-icon [icon]="'pencil-alt'"></fa-icon>&nbsp;<span> Edit</span>
        </button>

        <div class="footer">
            <p>Start Visit List</p>
        </div>


        <div class="table-responsive" *ngIf="visitList">
            <table class="table table-striped">
                <thead>
                <tr jhiSort [(predicate)]="visitList.predicate" [(ascending)]="visitList.reverse" [callback]="visitList.transition.bind(this)">
                    <th jhiSortBy="id"><span>ID</span>
                        <fa-icon [icon]="'sort'"></fa-icon>
                    </th>
                    <th jhiSortBy="date"><span>Date</span>
                        <fa-icon [icon]="'sort'"></fa-icon>
                    </th>
                    <th jhiSortBy="clientName"><span>Client</span>
                        <fa-icon [icon]="'sort'"></fa-icon>
                    </th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let visit of visitList; trackBy: visitList.trackId">
                    <td><a [routerLink]="['/visit', visit.id, 'view' ]">{{visit.id}}</a></td>
                    <td>{{visit.clientName}}</td>
                    <td>{{visit.date | date:'mediumDate'}}</td>
                    <td class="text-right">
                        <div class="btn-group flex-btn-group-container">
                            <button type="submit"
                                    [routerLink]="['/visit', visit.id, 'view' ]"
                                    class="btn btn-info btn-sm">
                                <fa-icon [icon]="'eye'"></fa-icon>
                                <span class="d-none d-md-inline">View</span>
                            </button>
                            <button type="submit"
                                    [routerLink]="['/client', visit.id, 'edit']"
                                    class="btn btn-primary btn-sm">
                                <fa-icon [icon]="'pencil-alt'"></fa-icon>
                                <span class="d-none d-md-inline">Edit</span>
                            </button>
                            <button type="submit"
                                    [routerLink]="['/', { outlets: { popup: 'visit/'+ visit.id + '/delete'} }]"
                                    replaceUrl="true"
                                    queryParamsHandling="merge"
                                    class="btn btn-danger btn-sm">
                                <fa-icon [icon]="'times'"></fa-icon>
                                <span class="d-none d-md-inline">Delete</span>
                            </button>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>


        </div>

        <div class="footer">
            <p>End Visit List</p>
        </div>

    </div>
</div>

client.model.ts

 import { Moment } from 'moment';
 import { IVisit } from 'app/shared/model/visit.model';
 import { IOrder } from 'app/shared/model/order.model';

 export interface IClient {
    id?: number;
    name?: string;
    birthDate?: Moment;
    phoneNumber?: string;
    visits?: IVisit[];
    orders?: IOrder[];
 }

export class Client implements IClient {
   constructor(
       public id?: number,
       public name?: string,
       public birthDate?: Moment,
       public phoneNumber?: string,
       public visits?: IVisit[],
       public orders?: IOrder[]
    ) {}
 }

visit.model.ts

import { Moment } from 'moment';

export interface IVisit {
    id?: number;
    date?: Moment;
    clientName?: string;
    clientId?: number;
}

export class Visit implements IVisit {
    constructor(public id?: number, public date?: Moment, public     clientName?: string, public clientId?: number) {}
}

visit.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import * as moment from 'moment';
import { DATE_FORMAT } from 'app/shared/constants/input.constants';
import { map } from 'rxjs/operators';
import { SERVER_API_URL } from 'app/app.constants';
import { createRequestOption } from 'app/shared';
import { IVisit } from 'app/shared/model/visit.model';

type EntityResponseType = HttpResponse<IVisit>;
type EntityArrayResponseType = HttpResponse<IVisit[]>;
@Injectable({ providedIn: 'root' })
export class VisitService {
   public resourceUrl = SERVER_API_URL + 'api/visits';

   constructor(protected http: HttpClient) {}
   create(visit: IVisit): Observable<EntityResponseType> {
       const copy = this.convertDateFromClient(visit);
       return this.http
           .post<IVisit>(this.resourceUrl, copy, { observe: 'response'    })
        .pipe(map((res: EntityResponseType) => this.convertDateFromServer(res)));
}

   update(visit: IVisit): Observable<EntityResponseType> {
       const copy = this.convertDateFromClient(visit);
       return this.http
           .put<IVisit>(this.resourceUrl, copy, { observe: 'response' })
           .pipe(map((res: EntityResponseType) =>    this.convertDateFromServer(res)));
}

   find(id: number): Observable<EntityResponseType> {
       return this.http
           .get<IVisit>(`${this.resourceUrl}/${id}`, { observe:  'response' })
           .pipe(map((res: EntityResponseType) =>    this.convertDateFromServer(res)));
   }

query(req?: any): Observable<EntityArrayResponseType> {
    const options = createRequestOption(req);
    return this.http
        .get<IVisit[]>(this.resourceUrl, { params: options, observe: 'response' })
        .pipe(map((res: EntityArrayResponseType) =>    this.convertDateArrayFromServer(res)));
}

delete(id: number): Observable<HttpResponse<any>> {
    return this.http.delete<any>(`${this.resourceUrl}/${id}`, { observe: 'response' });
}

protected convertDateFromClient(visit: IVisit): IVisit {
    const copy: IVisit = Object.assign({}, visit, {
        date: visit.date != null && visit.date.isValid() ? visit.date.format(DATE_FORMAT) : null
    });
    return copy;
}

protected convertDateFromServer(res: EntityResponseType):   EntityResponseType {
    if (res.body) {
        res.body.date = res.body.date != null ? moment(res.body.date) : null;
    }
    return res;
}

protected convertDateArrayFromServer(res: EntityArrayResponseType): EntityArrayResponseType {
    if (res.body) {
        res.body.forEach((visit: IVisit) => {
            visit.date = visit.date != null ? moment(visit.date) : null;
        });
    }
    return res;
}

* *} Тысяча двадцать-один

Моя форма мастер-детали выглядит как на картинке. Ни голова, ни тело таблицы посещений.