Reply To: Custom dialog when click on smar-grid cell (Angular)

[Hristofor]

Hi vinci goh,
After following your steps in order to create a test demo, we didn’t encounter any issues whatsoever. So I will share the full code for the demo so you can have a look at how to implement the input/output parent-child behavior in your working scenario:
Here’s the HTML of the ‘child-component.component.html’:

<smart-grid #grid></smart-grid>

Here’s the ‘child-component.component.ts’:

import { Component, ViewChild, AfterViewInit, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
import { GridComponent, GridColumn, DataAdapter, Smart, GridCell } from 'smart-webcomponents-angular/grid';
import { GetData } from '../../../common/data'
@Component({
	selector: 'app-child-component',
	templateUrl: './child-component.component.html',
	styleUrls: ['child-component.component.css'],
	encapsulation: ViewEncapsulation.None
})
export class ChildComponent implements AfterViewInit {
	@ViewChild("grid", { read: GridComponent, static: false }) grid: GridComponent;
	@Output() myClicked: EventEmitter<any> = new EventEmitter<any>();
	ngAfterViewInit(): void {
		const that = this;
		that.grid.dataSource = new Smart.DataAdapter(
			<DataAdapter>{
				dataSource: GetData(500),
				dataFields:
					[
						'id: number',
						'firstName: string',
						'lastName: string',
						'productName: string',
						'quantity: number',
						'price: number',
						'total: number'
					]
			});
		that.grid.columns =
			<GridColumn[]>[
				{ label: 'First Name', dataField: 'firstName', columnGroup: 'name' },
				{ label: 'Last Name', dataField: 'lastName', columnGroup: 'name' },
				{ label: 'Product', dataField: 'productName', columnGroup: 'order' },
				{ label: 'Quantity', dataField: 'quantity', columnGroup: 'order' },
				{ label: 'Unit Price', dataField: 'price', cellsFormat: 'c2', columnGroup: 'order' },
				{ label: 'Total', dataField: 'total', cellsFormat: 'c2', columnGroup: 'order' }
			];
		that.grid.paging.enabled = true;
		that.grid.pager.visible = true;
		that.grid.selection = {
			enabled: true,
			allowCellSelection: true,
			allowRowHeaderSelection: true,
			allowColumnHeaderSelection: true,
			mode: 'extended'
		};
		that.grid.addEventListener('cellClick', function (event: CustomEvent) {
			const gridCell = <GridCell>event.detail.cell;
			that.myClicked.emit(gridCell.element);
		});
	}
}

Here’s the ‘app.component.html’:

<app-child-component (myClicked)="log($event)"></app-child-component>

Here’s the ‘app.component.ts’:

import { Component, ViewChild, AfterViewInit, ViewEncapsulation, Input } from '@angular/core';
@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['app.component.css'],
	encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {
	log(gridCell: any) {
		console.log(gridCell);
	}
}

The example shows how to emit the clicked grid cell element to the parent component but you can replace that with any details for the cell you need. If you need further assistance or have any questions feel free to ask.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com