Styjun

I am experimenting with Angular 7 and JQWidgets. I am working on Grid component and want to export Grid's data from another component called settings.
I worked on the demo (available here) and I created the following component:

import Component, ElementRef, Input, AfterViewInit, ViewChild from '@angular/core';
import jqxDropDownListComponent from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxdropdownlist';
import jqxGridComponent from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';

@Component(
 selector: 'app-mydemo',
 templateUrl: './mydemo.component.html'
)

export class MydemoComponent
 @ViewChild('myGrid') myGrid: jqxGridComponent;
 @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent;

 exportFiletype: any;

 constructor() 

 exportBtnOnClick() 
 this.exportFiletype = this.myDropDownList.getSelectedItem().value;
 switch (this.exportFiletype) 
 case 'Excel':
 this.myGrid.exportdata('xls', 'jqxGrid', true, null, true, 'https://jqwidgets.com/export_server/dataexport.php');
 break;
 case 'CSV':
 this.myGrid.exportdata('csv', 'jqxGrid', true, null, true, 'https://jqwidgets.com/export_server/dataexport.php');
 break;
 ;
 ;

My problem is with this.myGrid referrring to the Grid in the other component. How can I refer straight to it?

Updated as per new information:-

Use one of the https://angular.io/guide/component-interaction models to interact between components.

Following is the example of template variables.

Main Component

//showing only html

<my-grid #myGrid><my-grid>
<my-dropdown [grid]="myGrid.jqxGrid"><my-dropdown>

Component A (my-dropdown)

Use onSelect and you can pass in your myDropDownList reference as well that way you can pass whatever reference you will

Bind to the select event of jqxDropDownList.

import Component from "@angular/core";

@Component(
 selector: "my-dropdown",
 template: `
 <jqxDropDownList #myDropDownList (onSelect)="exportTo($event)"
 [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
 </jqxDropDownList>
 `
)

export class MyDropDown
 @Input() grid: jqxGridComponent
 exportTo(event: any): void 
 
 if (this.grid) 
 this.grid.doSomething()
 
 

 source: string[] =
 [
 'Affogato',
 'Americano',
 'Bicerin',
 'Breve'
 ];

Component B - Grid component

template: `
<jqxGrid #jqxGrid [theme]="'material'"
 [width]="getWidth()" [source]="dataAdapter" [columns]="columns"
 [pageable]="true" [autoheight]="true" [sortable]="true" 
 [altrows]="true" [enabletooltips]="true" [editable]="true" 
 [selectionmode]="'multiplecellsadvanced'" [columngroups]="columngroups">
</jqxGrid>
`
export class MyGrid 
 @ViewChild('jqxGrid') jqxGrid: jqxGridComponent;