Every time a tab is clicked, the Component "EventDetailItemsComponent" is called with different navParams. The async data (Observable) is fetched from this.itemService and displayed as expected.

The issue arises when switching back to the same tab for the second time. Since the Component is not recalled, it displays the same async data. Therefore, the tab view is not updated.

I aim to invoke EventDetailItemsComponent every time a tab is clicked, not just on the initial click.

Would it be correct to transmit the async data from the parent component EventDetailComponent to the child component EventDetailItemsComponent using (ionSelect)="myMethod()"

    <ion-tabs no-margin no-padding selectedIndex="1">
        <ion-tab [root]="EventDetailItems1" [rootParams]="{itemTypeId:1, eventId: (eventDetail | async)?.id}" tabTitle="{{'ALL' | translate}}"></ion-tab>
        <ion-tab [root]="EventDetailItems2" [rootParams]="{itemTypeId:2, eventId: (eventDetail | async)?.id}" tabTitle="{{'BOUGHT' | translate}}"></ion-tab>
        <ion-tab [root]="EventDetailItems3" [rootParams]="{itemTypeId:3, eventId: (eventDetail | async)?.id}" tabTitle="{{'LEFT' | translate}}"></ion-tab>
    </ion-tabs>


    export class EventDetailComponent implements OnInit {

        EventDetailItems1: any = EventDetailItemsComponent;
        EventDetailItems2: any = EventDetailItemsComponent;
        EventDetailItems3: any = EventDetailItemsComponent;

        constructor(){ }
    }

Child Component EventDetailItemsComponent and its html

    @Component({
        selector: 'event-detail-items',
        styleUrls: ['/event-detail-items.scss'],
        templateUrl: 'event-detail-items.html'
    })
    export class EventDetailItemsComponent implements OnInit, OnChanges  {
        private _itemDetail = new BehaviorSubject<ItemViewModel[]>(null);
        itemDetail = this._itemDetail.asObservable();

        itemToggle: number = 0;
        lastImage: string = null;
        loading: Loading;

        constructor(
            public itemService: ItemService,
            public eventService: EventService,
            public navParams: NavParams,
            public navCtrl: NavController,
            public loadingCtrl: LoadingController,
            private app: App) {

        }

        ngOnInit() {
            let itemParams: GiftItemTabNavParams = JSON.parse(JSON.stringify(this.navParams.data));                
            this.itemService.getItemList(itemParams.eventId, itemParams.itemTypeId).subscribe(x => {
                this._itemDetail.next(x);
            });
        }
    }


          <ion-grid id="gift-list-grid">                
            <ion-row class="gift-list-row" *ngFor="let giftItem of (itemDetail | async)" text-center bottom>
                <ion-col (click)="toggleItemDescription(giftItem.id)" class="gift-item-col-item-pic" col-3>
                    <img src="{{giftItem.giftImagePath}}" />
                </ion-col>
                <ion-col (click)="toggleItemDescription(giftItem.id)" class="gift-item-col-detail" col-6>
                    <ion-label text-wrap class="gift-item-text" no-margin text-left>
                        <span>
                            {{giftItem.giftItemName}}
                        </span>
                        <span>
                            {{giftItem.brand}}
                        </span>
                    </ion-label>
                </ion-col>
                <ion-col (click)="toggleItemDescription(giftItem.id)" class="gift-item-col-gift-count" col-3>
                    <img src="./assets/img/inner-pages/gift_box.png" />
                    <p>
                        {{giftItem.amount}}
                    </p>
                </ion-col>
                <ion-col (click)="toggleItemDescription(giftItem.id)" *ngIf="itemToggle == giftItem.id" col-9>
                    <ion-label text-wrap class="gift-item-description" no-margin text-left>
                        <span>
                            {{giftItem.amount}} {{'AMOUNT' | translate}}
                        </span>
                        <span>
                            {{giftItem.description}}
                        </span>
                    </ion-label>
                </ion-col>
                <ion-col (click)="toggleBuyStatus(giftItem.id, giftItem.isBought, giftItem.giftStatus)" *ngIf="itemToggle == giftItem.id" class="gift-item-col-detail"  col-3>
                    <!--RESERVABLE ITEM-->
                    <img *ngIf="giftItem.giftStatus == 0" src="./assets/img/inner-pages/free.png" />
                    <!--CAN BE UNRESERVED-->
                    <img *ngIf="giftItem.giftStatus == 1" src="./assets/img/inner-pages/unreservable.png" />
                    <!--CAN NOT BE UNRESERVED-->
                    <img *ngIf="giftItem.giftStatus == 2" src="./assets/img/inner-pages/not-unreservable.png" />
                </ion-col>
            </ion-row>
        </ion-grid>

UPDATE: According to Sampath's suggestion, Events resolved the issue. Here is how it was used:

Root EventDetailComponent - Event Publish:

public eventTabsChanged(itemTypeId) {
            let event = this._eventDetail.getValue();
            this.events.publish('tab:clicked', itemTypeId, event.id);
        }

Tab content EventDetailItemsComponent - Event Subscribe

    constructor(
            public itemService: ItemService,       
            public events: Events) {
            events.subscribe('tab:clicked', (itemTypeId, eventId) => {
                this.itemService.getItemList(eventId, itemTypeId).subscribe(x => {
                    this._itemDetail.next(x);
                });
            });
        }