1. Parent component TS file
======================
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ChildComponent } from './ChildComponent.ts';
@Component({
templateUrl: './parent.component.html',
})
export class ParentComponent implements OnInit {
@ViewChild(ChildComponent) child;
order: any;
title: any;
isPrevDisabled: boolean = false;
isNextDisabled: boolean = false;
totalOrderID: any;
lastorder: any;
constructor()
{
this.sfdcId = 1;
this.title = "Parent Header";
}
ngOnInit() {
/*
*Get last order id in this method
*/
this.purchaseOrderApi.findOne({"order": "id DESC",fields: { id: true }}).subscribe(lastorder => {
this.lastorder = lastorder
this.totalOrderID = this.lastorder.id;
}, error => { console.log(error.message) });
}
/*
* Enable or disabled next or previous button.
* Change Page Title
*/
public GetOrder(reqObj: any): void {
if(reqObj)
{
this.title=reqObj.Job_orderId;
const currentOrderId=reqObj.Current_orderId;
if (this.totalOrderID < currentOrderId + 1) {
this.isNextDisabled = true;
this.isPrevDisabled = false;
}
else if (currentOrderId - 1 <= 0) {
this.isNextDisabled = false;
this.isPrevDisabled = true;
}
else
{
this.isNextDisabled = false;
this.isPrevDisabled = false;
}
}
}
prevclick() {
this.child.getPrevOrder();
}
nextclick() {
this.child.getnextOrder();
}
}
2. Parent component HTML file
======================
parent.component.html
<div class="col-sm-12 col-md-6 text-right">
<div>
<button (click)="prevclick()"
disabled]="isPrevDisabled"
type="button">« Back
</button>
<button (click)="nextclick()"
[disabled]="isNextDisabled"
type="button">Next »
</button>
</div>
</div>
<div>
<child-detail modelName='order' modelId={{sfdcId}}
(GetcurrentOrder)="GetOrder($event)">
</child-detail>
</div>
3. Child component TS file
=====================
import { Component, OnInit, Input,Output, EventEmitter } from '@angular/core';
import { PurchaseOrderApi } from '../sdk/services/custom/PurchaseOrder';
@Component({
selector: 'child-detail',
templateUrl: './child-detail.component.html'
})
export class ChildComponent implements OnInit {
@Input() modelName: string;
@Input() modelId: string;
@Output() GetcurrentOrder: EventEmitter<any>
= new EventEmitter<any>();
order: any;
currentOrderId: number;
relationsearchArray:any;
constructor(private purchaseOrderApi: PurchaseOrderApi) {
this.relationsearchArray = [{ relation: 'vendor', scope: { fields: { Name: true } } },
{ relation: 'jobsite', scope: { fields: { Name: true } } }]
}
ngOnInit() {
console.log('Call made for model ' + this.modelName);
this.getOrderDetails({ 'sfdcId': this.modelId });
}
getOrderDetails(query: any) {
this.purchaseOrderApi.findOne({include: this.relationsearchArray,'where': query }).subscribe(order => {
this.order = order
this.currentOrderId = this.order.id;
const reqObj={Current_orderId:this.currentOrderId,
Job_orderId:this.order.sfdcId};
this.GetcurrentOrder.emit(reqObj);
},
error => { console.log(error.message) });
}
getPrevOrder()
{
this.getOrderDetails({ 'id': this.currentOrderId-1 })
}
getnextOrder()
{
this.getOrderDetails({ 'id': this.currentOrderId+1 })
}
}
4. Child component HTML file
======================
<div class="col-sm-6">
<strong class="text-muted">Vender Name</strong>
<p>{{order?.vendor?.Name}} </p>
</div>
<div class="col-sm-6">
<strong class="text-muted">Job Order ID</strong>
<p>{{order?.Work_Order_num__c}} </p>
</div>
