In tab component,if its tab item content(<ng-template #content></ng-template>) contains another angular component,it renders and destroy the component even before actual rendering.

[Goutham]

Hi,

Tab component used like below shown.

ex):

 <ejs-tab >

          <e-tabitems >

            <e-tabitem [header]='headerText[0]' >

              <ng-template #content>

                <up-phone></up-phone>(inner component which we included)

if we tested with ngOnDestroy() method in phone component ,it is called even before destroying.

case where i got the problem:

we are trying to remove the dialog(ejs-dialog using id) element which is included in component(<up-phone>) using onDestroy method of component(<up-phone>).

It is giving error because of its calling mechanism.

[Nevitha Ravi]

Hi Goutham, 

 

Thanks for contacting Syncfusion support. 

 

We had checked your reported scenario at our end. Tab component is working properly while we render the dialog inside the tab as external component. When we destroy the tab component, before that we need to destroy the dialog component manually. ‘ngOnDestroy’ method is not invoked because we are destroying just tab component, not the angular component. When we destroy the angular component, in this case ‘ngOnDestroy’ method is invoked by default. The best example for destroying angular component is angular routing. While we switch from one component to another component the ‘ngOnDestroy’ method invokes properly. 

Kindly revert us, if we misunderstood your requirement or any other queries. 

Regards,  

Nevitha