How does visibleIf works internally?

[rockstarjindal]

Hi, I'm trying to replace default bootstrap checkboxes with this one - https://github.com/minhur/bootstrap-toggle.

So far I've been successful by creating another widget and assigning that widget in my template. Unfortunately that checkbox library does not emit the original value-change event and I have to override with a custom function.

That works well for toggling the checkboxes, and controlProperty, formProperty valueChanges events are being emitted now but the visibleIf property of other elements is no longer working as in they are no longer appearing or hiding anymore. Can you tell me what else do I have to propagate apart from value-changes in formProperty so that visibleIf works?

Sample Widget code

ngAfterViewInit() {
	super.ngAfterViewInit();
	const control = this.control;
        // Change checkboxes design.
	$("[type=checkbox][name='" + this.id + "']").bootstrapToggle({
		on: 'YES',
		off: 'NO',
		size: 'small'
	});
        // Custom change event as the original one is not being emitted.
	$("[type=checkbox][name='" + this.id + "']").change((event) => {
		if (control.value && Array.isArray(control.value)) {
			if (event.target.checked) {
				this.checked[event.target.value] = true;
			} else {
				delete this.checked[event.target.value];
			}
			this.formProperty.setValue(Object.keys(this.checked), false);
		} else {
			this.control.setValue(event.target.checked)
		}
	});
        // Change checkbox when formProperty is being manipulated outside of user interaction e.g. loading up default values
	this.formProperty.valueChanges.subscribe((newValue) => {
		if (control.value !== newValue || (newValue && Object.keys(this.checked).length != newValue.length)) {
			control.setValue(newValue, { emitEvent: false });
			if (newValue && Array.isArray(newValue)) {
				newValue.map(v => {
					this.checked[v] = true;
					$("input[type=checkbox][name='" + this.id + "'][value='" + v + "']").prop('disabled', false);
					$("input[type=checkbox][name='" + this.id + "'][value='" + v + "']").bootstrapToggle('on');
					$("input[type=checkbox][name='" + this.id + "'][value='" + v + "']").prop('disabled', this.schema.readOnly);
				});
			}
		}
	});
	this.formProperty.errorsChanges.subscribe((errors) => {
		control.setErrors(errors, { emitEvent: true });
	});

}

[daniele-pecora]

May this comment will enlighten some aspects of how visibleIf works: https://github.com/guillotinaweb/ngx-schema-form/issues/258#issuecomment-447123278