Call parent to child or child to parent method(Pass value one component to another (Next or Prev))

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">&laquo; Back

</button>

<button (click)="nextclick()"

[disabled]="isNextDisabled"

type="button">Next &raquo;

</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}}&nbsp;</p>

</div>

<div class="col-sm-6">

<strong class="text-muted">Job Order ID</strong>

<p>{{order?.Work_Order_num__c}}&nbsp;</p>

</div>