Using the Smart Viewer Programmatically

Obtaining a reference to Smart Viewer can be done in the same manner in which references to any Angular components are obtained, by using the @ViewChild annotation.

HTML

				<smart-viewer 
                    #customerViewer
                    smart-object-name='customerViewer' 
                    smart-data-source='customerDataSource' 
                    smart-tableio-source='customerToolbar'
                    smart-viewer-layout='Consultingwerk.SmartComponentsDemo.OERA.Sports2000.CustomerBusinessEntity/customer'>
                </smart-viewer>

Smart Controller

@ViewChild(SmartViewerComponent) //this way of annotating the customerViewer field retrieves a reference by component type
customerViewer: SmartViewerComponent;
//or
@ViewChild('customerViewer') //this way of annotating the customerViewer field retrieves a reference by component name (using the "#customerViewer" HTML attribute)
customerViewer: SmartViewerComponent;
 
ngAfterViewInit() {
	this.customerViewer.inputValueChanged.subscribe((event: InputChangedEventArgs) => {
		    if (event.inputId === 'inputCountry') {
				console.log(`Country changed to ${event.inputValue}`);
            }
   });
}