I have a page a component that displays a list of items. When a user clicks on the item, a form should be displayed with the relevant data. Users also have the option of creating new items by selecting the relevant form.
I have the following in the parent component:
<ng-container [ngSwitch]="type">
<ng-container *ngSwitchCase="'TYPE1'">
<page-type-A></page-type-A>
</ng-container>
<ng-container *ngSwitchCase="'TYPE2'">
<page-type-B></page-type-B>
</ng-container>
The problem I am facing is highlighted by the following user experience:
- They create a new item (call it item 3 of item type-A)
- They save the item and are navigated back to the "item overview page"
- They select a different item (item 1) of item type-A
- They are shown the form with the data of item 1
The issue: is that the component is never destroyed. So when they went to create item 3, the component was initialized once, but then never again. This means that I am unable to use angulars lifecycle hooks. I do not know angular very well, and this is something that keeps popping up.
I am wondering if there is something obvious that I can do to fix this issue. I really want the component destroyed everytime it is closed, so that next time that item-type is called, the ngOnInit() gets called.
I believe that if I was using an *ngIf instead of the switch, but in this case it's just cleaner to use a switch.