akveo / akveo/ng2-smart-table

get output from custom editor component into the main component from where it is called

Open
#608 0 comments 3 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1.6k
Forks
867
PR merge metrics
No merged PRs in 30d

Description

i have a component named orders.component.ts in this component i have a table in which i used button.editor.component.ts from which i am calling a Modalcomponent on button click this modal component returns data in the button.editor.component.ts but i want this data in orders.component.ts because i have to add this data into another column of my table. Code is written below. thanks in advance..

orders.component.ts

`od_stock_desc: {
title: 'Stock',
type: 'html',
width: '30%',
editor: {
type: 'custom',
component: ButtonEditorComponent,
},
}`

button.editor.component.ts

`import { Component, Input, OnInit, ViewChild, ElementRef, AfterViewInit, Output, EventEmitter } from '@angular/core';
import { ViewCell,Cell, DefaultEditor, Editor } from 'ng2-smart-table';
import { StockPickListComponent } from '../purchasing/stockpicklist/stockpicklist.component';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { stockVO } from '../../../vo/stockVO';

@Component({
template: `



{{ renderValue }}







`,
})

export class ButtonEditorComponent extends DefaultEditor implements ViewCell, OnInit {

public renderValue = '';
public stkobjreturned : stockVO = new stockVO();

@Input() value;

@Output() save: EventEmitter = new EventEmitter();

constructor(private modalService: NgbModal) {
super();
}

ngOnInit() {
this.renderValue = this.value;
}

showModal() {
const modalRef = this.modalService.open(StockPickListComponent, { size: 'lg', backdrop: 'static', container: 'nb-layout' });
modalRef.componentInstance.modalHeader = 'Stock List';
modalRef.componentInstance.emitService.subscribe((emmitedValue) => {
this.stkobjreturned = emmitedValue;
this.renderValue = this.stkobjreturned.stk_code.toString() + ' - ' + this.stkobjreturned.stk_desc.toString() + ' ( ' + this.stkobjreturned.stk_uom_desc.toString() + ' ) ' ;
localStorage.setItem('stk_code',this.stkobjreturned.stk_code.toString());
localStorage.setItem('stk_uom',this.stkobjreturned.stk_uom_id.toString());
});
}
}
`

Modalcomponent

`import { Component, EventEmitter, Output } from '@angular/core';
import { LocalDataSource } from 'ng2-smart-table';
import { RESTService } from '../../../../services/rest.service';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { customerVO } from '../../../../vo/customerVO';

@Component({
selector: 'ngx-stockpicklist',
templateUrl: './stockpicklist.component.html',
styles: [`
nb-card {
transform: translate3d(0, 0, 0);
}
`],
})

export class StockPickListComponent {

@Output() emitService = new EventEmitter();

constructor(private service: RESTService,private activeModal: NgbActiveModal) {
this.service.getData('stock/list')
.subscribe(
data => this.source.load(data)
);
}

closeModal() {
this.activeModal.close();
}

onUserRowSelect(event): void {
this.emitService.next(event.data);
this.closeModal();
}

settings = {
actions: false,
columns: {
stk_code: {
title: 'Stock ID',
type: 'string',
},
stk_desc: {
title: 'Stock Description',
type: 'string',
},
},
};

source: LocalDataSource = new LocalDataSource();
}
`

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.