How to refresh a component on each page change

Question

I am calling a data service in an angular 2 component to load data on the ngOnInit() function. This component is placed on a Ionic tabs page. The ngOnInit() function is only called on initialization, but not on every navigation to the tab. I want to reload data from the data service on each navigation to the page, to refresh the component with the latest data.

How can I call a function in the component on each navigation to a tabs page?

This is my component:

@Component({ selector: 'reservation-list', templateUrl: 'build/components/reservation-list.component.html', bindings: [DataService, TimeService] }) export class ReservationListComponent { public items: any = []; constructor(private dataService: DataService) { } public ngOnInit() { // this I want to call on each tab navigation! this.items = this.dataService.getEvents(); } }

My tabs are basically the ionic2-tabs example:

@Page({ templateUrl: 'build/pages/tabs/tabs.html' }) export class TabsPage { // this tells the tabs component which Pages // should be each tab's root Page tab1Root: any = Page1; tab2Root: any = Page2; tab3Root: any = Page3; }

And the page is a basic ionic page where the component is insert:

<reservation-list></reservation-list> @Page({ templateUrl: 'build/pages/page1/page1.html', directives: [ReservationListComponent] }) export class Page1 { constructor() { } }

Guido · Accepted Answer · 2016-06-08 00:08:32Z

1

I think you can add a click event handler when you click your tabs and call that function.

In your tag

<a (click)="getEvents()"></a>

In you Component

getEvents() { this.items = this.dataService.getEvents(); }

answered Jun 8, 2016 at 0:08

Guido

10312 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jan Hommes Over a year ago

Where should I place getEvents then? in the page? The page does not know anything about the component.

Guido Over a year ago

You should place in both. In your HTML template and in your Component.

Jan Hommes Over a year ago

If I do so, do I need to mark the items as input parameter? <reservation-list [items]="items"></reservation-list> ?

Guido Over a year ago

No, because you call the getEvents function inside the reservation-list component. So you don't need a items input

Hkh · Accepted Answer · 2019-06-05 11:45:24Z

Please follow the life cycle of ionic and use below method inside tab child pages.

ionViewWillEnter() { //apply your code }

This method will call always when you come on page.

Collectives™ on Stack Overflow

How to refresh a component on each page change

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related