Checkbox *ngFor ej2_instances is undefined

[LastCodeDE]

Hello,

we are using the checkbox in version 16.1.28.

The problem happens in our most extensive mask. It happens sometimes when we change in our ngbootstrap tabset the current tab. The Tab contains a *ngFor with the syncfusion checkbox. I think the exception happens because it tries to remove the old element.

This is the error message:
this.element.ej2_instances is undefined

Base.prototype.destroy@http://localhost:54963/dist/app.bundle.js:41538:1 Component.prototype.destroy@http://localhost:54963/dist/app.bundle.js:45321:9 CheckBox.prototype.destroy@http://localhost:54963/dist/app.bundle.js:66922:9 __WEBPACK_AMD_DEFINE_RESULT__

Functions from app.bundle.js

CheckBox.prototype.destroy = function () {

var _this = this;

var wrapper = this.getWrapper();

_super.prototype.destroy.call(this); // Error Line 66922

if (!this.disabled) {

this.unWireEvents();

}

if (this.tagName === 'INPUT') {

wrapper.parentNode.insertBefore(this.element, wrapper);

Object(__WEBPACK_IMPORTED_MODULE_0__syncfusion_ej2_base__["detach"])(wrapper);

this.element.checked = false;

if (this.indeterminate) {

this.element.indeterminate = false;

}

['name', 'value', 'disabled'].forEach(function (key) {

_this.element.removeAttribute(key);

});

}

else {

['role', 'aria-checked', 'class'].forEach(function (key) {

wrapper.removeAttribute(key);

});

if (this.element.id) {

wrapper.setAttribute('id', this.element.id);

}

wrapper.innerHTML = '';

}

};

Component.prototype.destroy = function () {

if (this.isDestroyed) {

return;

}

if (this.enablePersistence) {

this.setPersistData();

}

this.localObserver.destroy();

if (this.refreshing) {

return;

}

this.trigger('destroyed', { cancel: false });

_super.prototype.destroy.call(this); // Error Line 45321

this.moduleLoader.clean();

onIntlChange.off('notifyExternalChange', this.detectFunction);

};

Base.prototype.destroy = function () {

var _this = this;

this.element.ej2_instances =

this.element.ej2_instances.filter(function (i) { return i !== _this; }); // Error Line 41538

removeClass([this.element], ['e-' + this.getModuleName()]);

if (this.element.ej2_instances.length === 0) {

// Remove module class from the root element

removeClass([this.element], ['e-control']);

}

this.clearChanges();

this.modelObserver.destroy();

this.isDestroyed = true;

};

[Vinoth Kumar Sundara Moorthy]

Hi LastCodeDE, 

 

Thank you for using Syncfuion products. 

 

We have checked your reported issue “Exception throws while switching the tab with *ngFor with the Syncfusion checkbox” by preparing angular sample (in V16.1.28). In that sample, we have used the *ngFor to render the checkbox inside the bootstrap tabset and we are not able to reproduce the reported issue in our end.  

 

Before we proceed further, we would like to know the following details, 

1.       Please specify more information about tab content that is placed along with checkbox and other customization details on tab switch. 

2.       Please provide details about the way you are rendering the ngbootstrap tabset and Syncfusion checkbox. 

3.       Could you please check the below provided plunker sample and replicate your issue in that sample if possible? 

 

Sample Link: https://plnkr.co/edit/vn8SUm0EkFloJtKMQVAW?p=preview 

 

Could you please check and get back to us with more information so that we could able to sort out the cause of this issue and provide you a better solution quickly? The information provided would be great help for us to proceed further. 

 

Regards, 

Vinoth Kumar S 

[LastCodeDE]

We changed for our complicated view the changeDetection-Mode to ChangeDetectionStrategy.OnPush.

The failure doesn't happen anymore until yet. When there is something new I will write it here.

Regards
LastCodeDE

[Vinoth Kumar Sundara Moorthy]

Hi LastCodeDE, 

 

Thank you for your update. Please get back to us if you face any issues or need further assistance. We will be happy to assist you. 

 

Regards, 

Vinoth Kumar S