I am creating a grid using ag-grid. Here I want to create custom dynamic cell editors. Which show different edit fields based on the value inside the cell. I got the idea from here.
This question is a design-oriented question. I want to have multiple editors which all have their own getValue() and isPopup() return values. These methods are the ones used by the library through ICellEditorComponent. Here is a basic overview of the design. Now am I wondering, do I use inheritance? And if so, do I inherit prop-editor into the specific designs even though isn't abstract? Or do I instead create a separate abstract class which basically contains these methods used in all the editors? Is there a different/better approach?
Here is some code to give you an idea of what I am stumbling on. prop-editor.component.ts.
@Component({
selector: "editor-cell",
template: `
<div #container tabindex="0">
<span *ngIf="array">
<app-prop-array-editor [params]="params.value"></app-prop-array-editor>
</span>
</div>
`,
styles: []
})
export class PropEditorComponent
implements ICellEditorAngularComp, AfterViewInit {
private array: boolean = true;
private params: any;
private isPopupValue: boolean;
public stringValue: string;
@ViewChild("container", { read: ViewContainerRef, static: true })
public container;
constructor() {}
ngAfterViewInit() {
this.container.element.nativeElement.focus();
}
// This will decide what component is displayed
// by setting a value which will be used in *ngIf
agInit(params: any): void {
this.params = params;
if (params.value is array) {
} else {
}
}
// return value from one of the editors
getValue(): any {
return this.stringValue;
}
// return value from one of the editors
isPopup(): boolean {
return true;
}
}
And prop-array-editor.component.ts. It is currently not finished yet but the question is about the overlaying design.
@Component({
selector: "editor-cell",
template: `
<form [formGroup]="arrayForm">
<removed because unnecessary for question>
</form>
`,
styles: []
})
export class PropArrayEditorComponent {
arrayForm: FormGroup;
public stringValue: string;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
}
getValue(): any {
return this.stringValue;
}
isPopup(): boolean {
return true;
}
}
As you can see it uses isPopup() and getValue() which should give the right value up to prop-editor. Which, in turn, will give it back to the grid when asked. This will be the same for each implementation of the editor.
Would love to hear what the recommended design approach is.