Deeply nested button group callbacks now working

src/app/app.component.html

@@ -9,7 +9,7 @@
 			</p>
 		</div>
 	</div>
-	<app-dynaform [formGroup]="form" [meta]="meta" [template]="tref" debug="1"></app-dynaform>
+	<app-dynaform [formGroup]="form" [meta]="meta" [template]="tref" (call)="handleCallback($event)" debug="1"></app-dynaform>
 	<!-- Uncomment to test access to deeply-nested FormGroups using formGroupName -->
 	<!--
 	<form [formGroup]="form">

src/app/app.component.ts

@@ -79,11 +79,17 @@ export class AppComponent implements OnInit, OnChanges {
 			'SAYHELLO': this.sayHello,
 			'SAYCHEESE': this.sayCheese
 		}, this);
+		console.log('%c *** Callbacks *** ', this.hCssGreen);
+		console.dir(this.dynaform.callbacks);
 	}
 
 	ngOnChanges() {
 		console.log(this.form.errors);
 	}
+	
+	handleCallback(fnId) {
+		this.dynaform.call(fnId);
+	}
 
 	sayHello() {
 		alert('HELLO');

src/app/dynaform/components/nocontrol/button-group/button-group.component.ts

@@ -20,7 +20,6 @@ export class ButtonGroupComponent implements OnInit {
 	}
 	
 	handle(fnId: string, e: Event) {
-		console.log('BG Component', fnId);
 		e.preventDefault();
 		(e.target as HTMLElement).blur();
 		this.call.emit(fnId);

src/app/dynaform/directives/dynafield.directive.ts

@@ -96,10 +96,7 @@ export class DynafieldDirective extends NgControl implements OnInit, OnDestroy {
 
 			// Listen for 'call' Output events and send them onwards
 			if (instance.call) {
-				instance.call.subscribe(val => { 
-					console.log('Directive', val);
-					this.call.emit(val);
-				});
+				instance.call.subscribe((fnId: string) => this.call.emit(fnId));
 			}
 
 			// Add id and classes (as specified)

src/app/dynaform/dynaform.component.html

@@ -18,7 +18,7 @@
 		<div class="row pt-3">
 			<h3 class="col-sm-12" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
 		</div>
-		<app-dynaform [formGroup]="control" [meta]="meta.meta" [template]="template"></app-dynaform>
+		<app-dynaform [formGroup]="control" [meta]="meta.meta" [template]="template" (call)="handle($event)"></app-dynaform>
 	</ng-template>
 
 </ng-template>

src/app/dynaform/dynaform.component.ts

@@ -134,9 +134,8 @@ export class DynaformComponent implements OnInit {
 		return 'No Errors';
 	}
 
-	handle(val) {
-		console.log('Dynaform Component', val);
-		this.call.emit(val);
+	handle(fnId: string) {
+		this.call.emit(fnId);
 	}
 
 	private getContolKeysCSVFromMetadata(metadata): string {

src/app/dynaform/services/dynaform.service.ts

@@ -91,7 +91,7 @@ export interface Callbacks {
 export class DynaformService {
 
 	public buildFormGroup: (meta) => FormGroup;
-	private callbacks: Callbacks = {};
+	public callbacks: Callbacks = {};
 
 	constructor(private fb: FormBuilder) {
 		this.buildFormGroup = buildFormGroupFunctionFactory(fb);
@@ -103,14 +103,15 @@ export class DynaformService {
 	}
 
 	register(callbacks: Callbacks, cref: ComponentRef<any>['instance']) {
-		// Bind the component instance to the callback, so that 'this' has the context of the component
 		if (cref) {
+			// Bind the component instance to the callback, so that 'this' has the context of the component
 			Object.entries(callbacks).forEach(([key, fn]) => this.callbacks[key] = fn.bind(cref));
+		} else {
+			this.callbacks = callbacks;
 		}
 	}
 	
 	call(fnId: string) {
-		console.log('Dynaform Service', fnId);
 		// Handle callback events
 		try {
 			this.callbacks[fnId]();