Angular child component not destroyed when next item on parent has same variable value for ngIf on selector

Question

I have a number variable called currTab which is used to tab through three divs on the child component template. When tab is selected on the parent component template, the child component opens with the value of the previous instance. The default on open should be currTab = 1 but if I select 2 or 3, the next child that opens from the parent will have that value. I've tried setting the default through @Input currItem through ngOnInit and most of the other lifecycle events but it had no effect. I have another @Input called property that gets passed just fine. Each time the selecter is activated on the parent form the child component reflects the correct 'property' but not the default 'currTab'.

Child Component (template-tv-property)

    <input class="propertyTab" type="button" (click)="currTab = 1" value="Main View" [disabled]="currTab == 1" >
<input class=minMaxTab" type="button" (click)="currTab = 2" value="Min Max Values" [disabled]="currTab == 2" >
<input class="propertyTab" type"button" (click)="currTab = 3" value=" Lookup Values" [disabled]="currTab == 3" >

Parent Template

<div  class="itemFrame" *ngIf="currItemType !== ''">
  <template-tv-property [property]="currItem" [currTab]="1" (saveCurrentProperty)="saveCurrentItem($event)" [choiceBoxSize]="propertyChoicesListBoxSize" *ngIf="currItemType === 'property'" ></template-tv-property>
  <template-tv-part [part]="currItem" *ngIf="currItemType === 'part'"></template-tv-part>
  <template-tv-infogroup [infogroup]="currItem" *ngIf="currItemType === 'infoGroup'" ></template-tv-infogroup>
  <template-tv-grid [grid]="currItem" *ngIf="currItemType === 'grid'" ></template-tv-grid>
  <template-tv-signature-group [signatureGroup]="currItem" *ngIf="currItemType === 'signatureGroup'"></template-tv-signature-group>
  <template-tv-signature [signature]="currItem" *ngIf="currItemType === 'signature'"></template-tv-signature>
</div>

These changes in the 'currItemType' variable are being triggered by selecting items on a treeview in the parent component. if the type of item on the treeview is 'property' then the 'currItemType' is changed to 'property' and the property variable is passed as @Input. — Mark Ballard
If the next item selected on the treeview is also itemType = 'property' then the last child component isn't destroyed. It just has the 'property' @Input passed in. ngOnInit doesn't run again or any of the other lifecycle events for any additional selections of the same type on the treeview. — Mark Ballard
If however, the next item is a different type, then the 'property' child component does seem to get destroyed and the next one selected is new and gets initialized. — Mark Ballard
I tried setting a dummy component to switch to before switching to the actual on selected but the parent didn't seem to have time to destroy the last child. When I tries setting the 'currItemType' to open the dummy component setTimeout on the function that changes to the actual 'currItemType' it caused the function to not be able to find the current item in the treeview. — Mark Ballard

Mark Ballard Mark Ballard · Accepted Answer · 2018-10-10T15:28:12

This question had been answered before after all. I didn't find it the first time I searched.

Destroying and reloading a child component

Angular child component not destroyed when next item on parent has same variable value for ngIf on selector

1 Answers