Fatal编程技术网
  • angular/
  • Angular 角度6-从组件的填充板调用B组件的字段

Angular 角度6-从组件的填充板调用B组件的字段

angular

Angular 角度6-从组件的填充板调用B组件的字段,angular,Angular,我需要在发票组件的模板发票中插入付款组件的总和字段。我该怎么做？我需要将发票模板中的{{invoice.paymentId}替换为付款组件中的字段Sum 支付模式 import { Moment } from 'moment'; import { Money } from 'app/shared/model/money.model'; import { Currency } from 'app/shared/model/currency.model'; export interface IPa

我需要在发票组件的模板发票中插入付款组件的总和字段。我该怎么做？我需要将发票模板中的{{invoice.paymentId}替换为付款组件中的字段Sum

支付模式

import { Moment } from 'moment';
import { Money } from 'app/shared/model/money.model';
import { Currency } from 'app/shared/model/currency.model';

export interface IPayment {
    id?: number;
    date?: Moment;
    invoiceId?: number;
    sum?: Money;
}

export class Payment implements IPayment {
    constructor(public id?: number, public date?: Moment, public invoiceId?: number, public sum?: Money) {
        this.sum = new Money(undefined, Currency.UAH);
    }
}
支付服务

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 { SERVER_API_URL } from 'app/app.constants';
import { createRequestOption } from 'app/shared';
import { IPayment } from 'app/shared/model/payment.model';

type EntityResponseType = HttpResponse<IPayment>;
type EntityArrayResponseType = HttpResponse<IPayment[]>;

@Injectable({ providedIn: 'root' })
export class PaymentService {
    private resourceUrl = SERVER_API_URL + 'api/payments';

    constructor(private http: HttpClient) {}

    create(payment: IPayment): Observable<EntityResponseType> {
        const copy = this.convertDateFromClient(payment);
        return this.http
            .post<IPayment>(this.resourceUrl, copy, { observe: 'response' })
            .map((res: EntityResponseType) => this.convertDateFromServer(res));
    }

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

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

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

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

    private convertDateFromClient(payment: IPayment): IPayment {
        const copy: IPayment = Object.assign({}, payment, {
            date: payment.date != null && payment.date.isValid() ? payment.date.format(DATE_FORMAT) : null
        });
        return copy;
    }

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

    private convertDateArrayFromServer(res: EntityArrayResponseType): EntityArrayResponseType {
        res.body.forEach((payment: IPayment) => {
            payment.date = payment.date != null ? moment(payment.date) : null;
        });
        return res;
    }
}
发票组件

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpErrorResponse, HttpHeaders, HttpResponse } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { JhiEventManager, JhiParseLinks, JhiAlertService } from 'ng-jhipster';

import { IPayment } from 'app/shared/model/payment.model';
import { Principal } from 'app/core';

import { ITEMS_PER_PAGE } from 'app/shared';
import { PaymentService } from './payment.service';

@Component({
    selector: 'jhi-payment',
    templateUrl: './payment.component.html'
})
export class PaymentComponent implements OnInit, OnDestroy {
    currentAccount: any;
    payments: IPayment[];
    error: any;
    success: any;
    eventSubscriber: Subscription;
    routeData: any;
    links: any;
    totalItems: any;
    queryCount: any;
    itemsPerPage: any;
    page: any;
    predicate: any;
    previousPage: any;
    reverse: any;

    constructor(
        private paymentService: PaymentService,
        private parseLinks: JhiParseLinks,
        private jhiAlertService: JhiAlertService,
        private principal: Principal,
        private activatedRoute: ActivatedRoute,
        private router: Router,
        private eventManager: JhiEventManager
    ) {
        this.itemsPerPage = ITEMS_PER_PAGE;
        this.routeData = this.activatedRoute.data.subscribe(data => {
            this.page = data.pagingParams.page;
            this.previousPage = data.pagingParams.page;
            this.reverse = data.pagingParams.ascending;
            this.predicate = data.pagingParams.predicate;
        });
    }

    loadAll() {
        this.paymentService
            .query({
                page: this.page - 1,
                size: this.itemsPerPage,
                sort: this.sort()
            })
            .subscribe(
                (res: HttpResponse<IPayment[]>) => this.paginatePayments(res.body, res.headers),
                (res: HttpErrorResponse) => this.onError(res.message)
            );
    }

    loadPage(page: number) {
        if (page !== this.previousPage) {
            this.previousPage = page;
            this.transition();
        }
    }

    transition() {
        this.router.navigate(['/payment'], {
            queryParams: {
                page: this.page,
                size: this.itemsPerPage,
                sort: this.predicate + ',' + (this.reverse ? 'asc' : 'desc')
            }
        });
        this.loadAll();
    }

    clear() {
        this.page = 0;
        this.router.navigate([
            '/payment',
            {
                page: this.page,
                sort: this.predicate + ',' + (this.reverse ? 'asc' : 'desc')
            }
        ]);
        this.loadAll();
    }

    ngOnInit() {
        this.loadAll();
        this.principal.identity().then(account => {
            this.currentAccount = account;
        });
        this.registerChangeInPayments();
    }

    ngOnDestroy() {
        this.eventManager.destroy(this.eventSubscriber);
    }

    trackId(index: number, item: IPayment) {
        return item.id;
    }

    registerChangeInPayments() {
        this.eventSubscriber = this.eventManager.subscribe('paymentListModification', response => this.loadAll());
    }

    sort() {
        const result = [this.predicate + ',' + (this.reverse ? 'asc' : 'desc')];
        if (this.predicate !== 'id') {
            result.push('id');
        }
        return result;
    }

    private paginatePayments(data: IPayment[], headers: HttpHeaders) {
        this.links = this.parseLinks.parse(headers.get('link'));
        this.totalItems = parseInt(headers.get('X-Total-Count'), 10);
        this.queryCount = this.totalItems;
        this.payments = data;
    }

    private onError(errorMessage: string) {
        this.jhiAlertService.error(errorMessage, null, null);
    }
}

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpErrorResponse, HttpHeaders, HttpResponse } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { JhiEventManager, JhiParseLinks, JhiAlertService } from 'ng-jhipster';

import { IInvoice } from 'app/shared/model/invoice.model';
import { Principal } from 'app/core';

import { ITEMS_PER_PAGE } from 'app/shared';
import { InvoiceService } from './invoice.service';

@Component({
    selector: 'jhi-invoice',
    templateUrl: './invoice.component.html'
})
export class InvoiceComponent implements OnInit, OnDestroy {
    currentAccount: any;
    invoices: IInvoice[];
    error: any;
    success: any;
    eventSubscriber: Subscription;
    routeData: any;
    links: any;
    totalItems: any;
    queryCount: any;
    itemsPerPage: any;
    page: any;
    predicate: any;
    previousPage: any;
    reverse: any;

    constructor(
        private invoiceService: InvoiceService,
        private parseLinks: JhiParseLinks,
        private jhiAlertService: JhiAlertService,
        private principal: Principal,
        private activatedRoute: ActivatedRoute,
        private router: Router,
        private eventManager: JhiEventManager
    ) {
        this.itemsPerPage = ITEMS_PER_PAGE;
        this.routeData = this.activatedRoute.data.subscribe(data => {
            this.page = data.pagingParams.page;
            this.previousPage = data.pagingParams.page;
            this.reverse = data.pagingParams.ascending;
            this.predicate = data.pagingParams.predicate;
        });
    }

    loadAll() {
        this.invoiceService
            .query({
                page: this.page - 1,
                size: this.itemsPerPage,
                sort: this.sort()
            })
            .subscribe(
                (res: HttpResponse<IInvoice[]>) => this.paginateInvoices(res.body, res.headers),
                (res: HttpErrorResponse) => this.onError(res.message)
            );
    }

    loadPage(page: number) {
        if (page !== this.previousPage) {
            this.previousPage = page;
            this.transition();
        }
    }

    transition() {
        this.router.navigate(['/invoice'], {
            queryParams: {
                page: this.page,
                size: this.itemsPerPage,
                sort: this.predicate + ',' + (this.reverse ? 'asc' : 'desc')
            }
        });
        this.loadAll();
    }

    clear() {
        this.page = 0;
        this.router.navigate([
            '/invoice',
            {
                page: this.page,
                sort: this.predicate + ',' + (this.reverse ? 'asc' : 'desc')
            }
        ]);
        this.loadAll();
    }

    ngOnInit() {
        this.loadAll();
        this.principal.identity().then(account => {
            this.currentAccount = account;
        });
        this.registerChangeInInvoices();
    }

    ngOnDestroy() {
        this.eventManager.destroy(this.eventSubscriber);
    }

    trackId(index: number, item: IInvoice) {
        return item.id;
    }

    registerChangeInInvoices() {
        this.eventSubscriber = this.eventManager.subscribe('invoiceListModification', response => this.loadAll());
    }

    sort() {
        const result = [this.predicate + ',' + (this.reverse ? 'asc' : 'desc')];
        if (this.predicate !== 'id') {
            result.push('id');
        }
        return result;
    }

    private paginateInvoices(data: IInvoice[], headers: HttpHeaders) {
        this.links = this.parseLinks.parse(headers.get('link'));
        this.totalItems = parseInt(headers.get('X-Total-Count'), 10);
        this.queryCount = this.totalItems;
        this.invoices = data;
    }

    private onError(errorMessage: string) {
        this.jhiAlertService.error(errorMessage, null, null);
    }
}

从'@angular/core'导入{Component，OnInit，OnDestroy}；
从'@angular/common/http'导入{HttpErrorResponse，HttpHeaders，HttpResponse}；
从'@angular/Router'导入{ActivatedRoute，Router}；
从“rxjs”导入{Subscription}；
从“ng jhipster”导入{JhiEventManager、JhiParseLinks、JhiAlertService}；
从“app/shared/model/invoice.model”导入{IInvoice}；
从'app/core'导入{Principal}；
从“app/shared”导入{ITEMS_PER_PAGE}；
从“/invoice.service”导入{InvoiceService}；
@组成部分({
选择器：“jhi发票”，
templateUrl:“./invoice.component.html”
})
导出类InvoiceComponent实现OnInit、OnDestroy{
经常账户：任何；
发票：发票[]；
错误：任何；
成功：任何；
事件订户：订阅；
路由数据：任何；
链接：任何；
总计项目：任何；
查询计数：任何；
itemsPerPage：任何；
页码：任意；
谓词：any；
上一页：任何；
反面：任何；
建造师(
专用发票服务：发票服务，
专用解析链接：JhiParseLinks，
私人JhilertService:JhilertService，
私人校长：校长，
私有激活路由：激活路由，
专用路由器：路由器，
私有事件管理器：JhiEventManager
) {
this.itemsPerPage=每页的项目数；
this.routeData=this.activatedRoute.data.subscribe（数据=>{
this.page=data.pagingParams.page；
this.previousPage=data.pagingParams.page；
this.reverse=data.pagingParams.ascending；
this.predicate=data.pagingParams.predicate；
});
}
loadAll（）{
这是发票服务
.查询({
第页：this.page-1，
大小：this.itemsPerPage，
排序：this.sort（）
})
.订阅(
（res:HttpResponse）=>this.paginated（res.body，res.headers），
（res:HttpErrorResponse）=>此.onError（res.message）
);
}
加载页（页码：编号）{
如果（第！==此.previousPage）{
this.previousPage=第页；
这个。transition（）；
}
}
过渡（）{
this.router.navigate（['/invoice']{
查询参数：{
page:this.page，
大小：this.itemsPerPage，
排序：this.predicate+'，'+（this.reverse？'asc'：'desc'）
}
});
这是loadAll（）；
}
清除（）{
本页=0；
这是路由器([
“/发票”，
{
page:this.page，
排序：this.predicate+'，'+（this.reverse？'asc'：'desc'）
}
]);
这是loadAll（）；
}
恩戈尼尼特（）{
这是loadAll（）；
this.principal.identity（）.then（account=>{
this.currentAccount=账户；
});
此.registerChangeInVoices（）；
}
恩贡德斯特罗（）{
this.eventManager.destroy（this.eventSubscriber）；
}
trackId（索引：编号，项目：IInvoice）{
返回item.id；
}
注册更改文件（）{
this.eventSubscriber=this.eventManager.subscribe（'invoiceListModification'，response=>this.loadAll（））；
}
排序（）{
常量结果=[this.predicate+'，'+（this.reverse？'asc'：'desc'）；
if（this.predicate！==“id”）{
结果。推送（'id'）；
}
返回结果；
}
专用分页发票（数据：IInvoice[]，标题：HttpHeaders）{
this.links=this.parseLinks.parse（headers.get（'link'）；
this.totalItems=parseInt（headers.get（'X-Total-Count'），10）；
this.queryCount=this.totalItems；
这是发票=数据；
}
私有onError（错误消息：字符串）{
this.jhiAlertService.error（errorMessage，null，null）；
}
}
发票模板

<div>
    <h2 id="page-heading">
        <span jhiTranslate="hipsterfoxApp.invoice.home.title">Invoices</span>
    </h2>
    <jhi-alert></jhi-alert>
    <br/>
    <div class="table-responsive" *ngIf="invoices">
        <table class="table table-striped">
            <thead>
            <tr jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="transition.bind(this)">
            <th jhiSortBy="id"><span jhiTranslate="global.field.id">ID</span> <fa-icon [icon]="'sort'"></fa-icon></th>
            <th jhiSortBy="contractId"><span jhiTranslate="hipsterfoxApp.invoice.contract">Contract</span> <fa-icon [icon]="'sort'"></fa-icon></th>
            <th jhiSortBy="dateFrom"><span jhiTranslate="hipsterfoxApp.invoice.dateFrom">Date From</span> <fa-icon [icon]="'sort'"></fa-icon></th>
            <th jhiSortBy="dateTo"><span jhiTranslate="hipsterfoxApp.invoice.dateTo">Date To</span> <fa-icon [icon]="'sort'"></fa-icon></th>
            <th jhiSortBy="sumId"><span jhiTranslate="hipsterfoxApp.invoice.sum">Sum</span> <fa-icon [icon]="'sort'"></fa-icon></th>
            <th jhiSortBy="paymentId"><span jhiTranslate="hipsterfoxApp.invoice.payment">Payment</span> <fa-icon [icon]="'sort'"></fa-icon></th>
            <th></th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let invoice of invoices ;trackBy: trackId">
                <td><a [routerLink]="['/invoice', invoice.id, 'view' ]">{{invoice.id}}</a></td>
                <td>
                    <div *ngIf="invoice.contractId">
                        <a [routerLink]="['../contract', invoice.contractId , 'view' ]" >{{invoice.contractId}}</a>
                    </div>
                </td>
                <td>{{invoice.dateFrom | date:'mediumDate'}}</td>
                <td>{{invoice.dateTo | date:'mediumDate'}}</td>
                <td>{{invoice.sum.amount + ' ' + invoice.sum.currency}}</td>
                <td>
                    <div *ngIf="invoice.paymentId">
                        <a [routerLink]="['../payment', invoice.paymentId, 'view']" >{{invoice.paymentId}}</a>
                    </div>
                </td>
                <td class="text-right">
                    <div class="btn-group flex-btn-group-container">
                        <button type="submit"
                                [routerLink]="['/invoice', invoice.id, 'view' ]"
                                class="btn btn-info btn-sm">
                            <fa-icon [icon]="'eye'"></fa-icon>
                            <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
                        </button>
                        <button type="submit"
                                [routerLink]="['/invoice', invoice.id, 'edit']"
                                class="btn btn-primary btn-sm">
                            <fa-icon [icon]="'pencil-alt'"></fa-icon>
                            <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
                        </button>
                        <button type="submit"
                                [routerLink]="['/', { outlets: { popup: 'invoice/'+ invoice.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" jhiTranslate="entity.action.delete">Delete</span>
                        </button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div *ngIf="invoices && invoices.length">
        <div class="row justify-content-center">
            <jhi-item-count [page]="page" [total]="queryCount" [maxSize]="5" [itemsPerPage]="itemsPerPage"></jhi-item-count>
        </div>
        <div class="row justify-content-center">
            <ngb-pagination [collectionSize]="totalItems" [(page)]="page" [pageSize]="itemsPerPage" [maxSize]="5" [rotate]="true" [boundaryLinks]="true" (pageChange)="loadPage(page)"></ngb-pagination>
        </div>
    </div>
</div>


发票


身份证件
合同
从
日期
总和
付款
{{invoice.id}
{{invoice.contract}
{{invoice.dateFrom}日期：'mediumDate'}
{{invoice.dateTo}日期：'mediumDate'}
{{invoice.sum.amount+''+invoice.sum.currency}
{{invoice.paymentId}
看法
编辑
删除
我有付款服务和发票服务。我有来自InvoiceComponent的paymentId，但我不知道如何从Payment中获取字段总和

您可以通过几种方式处理此问题

你可以做的是重新设计缺陷，你可以创建一个包含付款和发票的组件，它们将显示为ngIf。在您完成yhis之后，您可以通过@Input和@Output从一个组件到另一个组件获得所需的内容 你可以在报纸上读到import { Component, OnInit, OnDestroy } from '@angular/core'; import { HttpErrorResponse, HttpHeaders, HttpResponse } from '@angular/common/http'; import { ActivatedRoute, Router } from '@angular/router'; import { Subscription } from 'rxjs'; import { JhiEventManager, JhiParseLinks, JhiAlertService } from 'ng-jhipster'; import { IInvoice } from 'app/shared/model/invoice.model'; import { Principal } from 'app/core'; import { ITEMS_PER_PAGE } from 'app/shared'; import { InvoiceService } from './invoice.service'; @Component({ selector: 'jhi-invoice', templateUrl: './invoice.component.html' }) export class InvoiceComponent implements OnInit, OnDestroy { currentAccount: any; invoices: IInvoice[]; error: any; success: any; eventSubscriber: Subscription; routeData: any; links: any; totalItems: any; queryCount: any; itemsPerPage: any; page: any; predicate: any; previousPage: any; reverse: any; constructor( private invoiceService: InvoiceService, private parseLinks: JhiParseLinks, private jhiAlertService: JhiAlertService, private principal: Principal, private activatedRoute: ActivatedRoute, private router: Router, private eventManager: JhiEventManager ) { this.itemsPerPage = ITEMS_PER_PAGE; this.routeData = this.activatedRoute.data.subscribe(data => { this.page = data.pagingParams.page; this.previousPage = data.pagingParams.page; this.reverse = data.pagingParams.ascending; this.predicate = data.pagingParams.predicate; }); } loadAll() { this.invoiceService .query({ page: this.page - 1, size: this.itemsPerPage, sort: this.sort() }) .subscribe( (res: HttpResponse<IInvoice[]>) => this.paginateInvoices(res.body, res.headers), (res: HttpErrorResponse) => this.onError(res.message) ); } loadPage(page: number) { if (page !== this.previousPage) { this.previousPage = page; this.transition(); } } transition() { this.router.navigate(['/invoice'], { queryParams: { page: this.page, size: this.itemsPerPage, sort: this.predicate + ',' + (this.reverse ? 'asc' : 'desc') } }); this.loadAll(); } clear() { this.page = 0; this.router.navigate([ '/invoice', { page: this.page, sort: this.predicate + ',' + (this.reverse ? 'asc' : 'desc') } ]); this.loadAll(); } ngOnInit() { this.loadAll(); this.principal.identity().then(account => { this.currentAccount = account; }); this.registerChangeInInvoices(); } ngOnDestroy() { this.eventManager.destroy(this.eventSubscriber); } trackId(index: number, item: IInvoice) { return item.id; } registerChangeInInvoices() { this.eventSubscriber = this.eventManager.subscribe('invoiceListModification', response => this.loadAll()); } sort() { const result = [this.predicate + ',' + (this.reverse ? 'asc' : 'desc')]; if (this.predicate !== 'id') { result.push('id'); } return result; } private paginateInvoices(data: IInvoice[], headers: HttpHeaders) { this.links = this.parseLinks.parse(headers.get('link')); this.totalItems = parseInt(headers.get('X-Total-Count'), 10); this.queryCount = this.totalItems; this.invoices = data; } private onError(errorMessage: string) { this.jhiAlertService.error(errorMessage, null, null); } } 
<div>
    <h2 id="page-heading">
        <span jhiTranslate="hipsterfoxApp.invoice.home.title">Invoices</span>
    </h2>
    <jhi-alert></jhi-alert>
    <br/>
    <div class="table-responsive" *ngIf="invoices">
        <table class="table table-striped">
            <thead>
            <tr jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="transition.bind(this)">
            <th jhiSortBy="id"><span jhiTranslate="global.field.id">ID</span> <fa-icon [icon]="'sort'"></fa-icon></th>
            <th jhiSortBy="contractId"><span jhiTranslate="hipsterfoxApp.invoice.contract">Contract</span> <fa-icon [icon]="'sort'"></fa-icon></th>
            <th jhiSortBy="dateFrom"><span jhiTranslate="hipsterfoxApp.invoice.dateFrom">Date From</span> <fa-icon [icon]="'sort'"></fa-icon></th>
            <th jhiSortBy="dateTo"><span jhiTranslate="hipsterfoxApp.invoice.dateTo">Date To</span> <fa-icon [icon]="'sort'"></fa-icon></th>
            <th jhiSortBy="sumId"><span jhiTranslate="hipsterfoxApp.invoice.sum">Sum</span> <fa-icon [icon]="'sort'"></fa-icon></th>
            <th jhiSortBy="paymentId"><span jhiTranslate="hipsterfoxApp.invoice.payment">Payment</span> <fa-icon [icon]="'sort'"></fa-icon></th>
            <th></th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let invoice of invoices ;trackBy: trackId">
                <td><a [routerLink]="['/invoice', invoice.id, 'view' ]">{{invoice.id}}</a></td>
                <td>
                    <div *ngIf="invoice.contractId">
                        <a [routerLink]="['../contract', invoice.contractId , 'view' ]" >{{invoice.contractId}}</a>
                    </div>
                </td>
                <td>{{invoice.dateFrom | date:'mediumDate'}}</td>
                <td>{{invoice.dateTo | date:'mediumDate'}}</td>
                <td>{{invoice.sum.amount + ' ' + invoice.sum.currency}}</td>
                <td>
                    <div *ngIf="invoice.paymentId">
                        <a [routerLink]="['../payment', invoice.paymentId, 'view']" >{{invoice.paymentId}}</a>
                    </div>
                </td>
                <td class="text-right">
                    <div class="btn-group flex-btn-group-container">
                        <button type="submit"
                                [routerLink]="['/invoice', invoice.id, 'view' ]"
                                class="btn btn-info btn-sm">
                            <fa-icon [icon]="'eye'"></fa-icon>
                            <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
                        </button>
                        <button type="submit"
                                [routerLink]="['/invoice', invoice.id, 'edit']"
                                class="btn btn-primary btn-sm">
                            <fa-icon [icon]="'pencil-alt'"></fa-icon>
                            <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
                        </button>
                        <button type="submit"
                                [routerLink]="['/', { outlets: { popup: 'invoice/'+ invoice.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" jhiTranslate="entity.action.delete">Delete</span>
                        </button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div *ngIf="invoices && invoices.length">
        <div class="row justify-content-center">
            <jhi-item-count [page]="page" [total]="queryCount" [maxSize]="5" [itemsPerPage]="itemsPerPage"></jhi-item-count>
        </div>
        <div class="row justify-content-center">
            <ngb-pagination [collectionSize]="totalItems" [(page)]="page" [pageSize]="itemsPerPage" [maxSize]="5" [rotate]="true" [boundaryLinks]="true" (pageChange)="loadPage(page)"></ngb-pagination>
        </div>
    </div>
</div>