How do I know if a component is viewed

Ionic Framework
1

Hi people
I have an issue. I have a view with segments. Each segment has a component with a purpose. In the first component I have a timer observer for showing data from my api periodically.
I need to stop the timer when segments have changed.
How do I know inside my component when its segment is not focus already??

1 Like
2

Does your segment component have user interaction?

3

<ion-segment
value=“requests”
scrollable=“false”
[(ngModel)]=“segmentModel”
(ionChange)=“segmentChanged($event)”>

segmentChanged($event) {
this.requestEnabled = this.segmentModel === ‘requests’;
}

Yes. I thought using parameters I passed a boolean to requestComponent and using onChanges I check for the value and if it’s false I know about the change but that worked only when th value is true. When requestEnabled is false it doesn’t even enter to the onChanges event.
It is so weird.
Oh, when it enter to the event before value always is undefined and current value true.

Could it be cause’ the change of segment?

4

Don’t mix (ngModelChange) and (ionChange) like that. You have no guarantee which will fire in what order. You have basically invented Schrödinger’s Segment.

2 Likes
5

I don’t know other way.

I really want to know how to stop an interval observable like this:

runFunctionOnIntervals(callback, inter?: number): Observable {
const i = (inter) ? inter : 5000;
this.intObs = interval(i);
const resObs = this.intObs.pipe(switchMap(data => callback))
return resObs;
}

I pass a HTTP.get observable and it returns the result each 5 seconds by default. I want to stop interval when my segment would have changed to other segment page.
That’s all

6

Is it u dont want to do a http if the segment is disabled or do you want to stop the timer? The first may be easier unless u want to restart?

7

Exactly, I want to get that info while the segment “request” is visible. Once user would have changed the segment or the view, I would like the interval stop.
If user return to the segment “request” I want the interval activated once again.
Any help please

8

I need some control on the segment from code. If I remove ngModel for instance and I need to change page by code, how do I do that?

9

Console log $event at the change handler and you will see it has the value of the segment in event.detail

This u can use to determine which segment is selecte and populate the respective varibale

And therefore ditch the ngModel

1 Like
10

Based on the value of the selected segment you can do a selector that does or prevents doing the http

Whether this is good old if, a filter in rxjs, a combination with rxjs switchmap or whatever pattern u like, will do just fine

11

Understand what the banana in the box means.

[ngModel]="foo" → assignments to foo in controller are reflected in template
(ngModelChange)="foo = $event" → changes in template propagate to controller
(ionChange)=onFooChanged($event)" → changes in template propagate to controller

Notice that those last two do the same thing, so if both are bound, you don’t know whether foo has or hasn’t been set by the time onFooChanged is called. Furthermore, [(ngModel)]="foo" is functionally equivalent to a combination of the first two on that list.

So I am saying just bind [ngModel], (not [(ngModel)]) if you insist on having ionChange as well.

1 Like
12

Ok, that’s all ok. I am learning a lot of you guys. But, those solutions are for a better use of segments.
Nevertheless, I keep having the same two problems. Well, one because I leave using intervals and solved using setInterval.
The BIG PROBLEM is leting know to the child component (requestComponent) that it was a changed o page. I am thinking on use observables as components communication.
Once more people, you are amaizing

1 Like
13

Consider state management using services as next best alternative to that route. Likely to solve many of your problems, including the ones that are coming.

May save you also lots of binding stuff in components.

1 Like
14

Thanks both of you.
I always learn on this forum. Tha is th most important thing. To learn.

1 Like
15

Hey pals, I solved all my problems on this issue.
I’ve learned a lot.
Several tips I learn.
1- ngOnInit into a component works. It is called once and parameters are not passed through
2-ngOnChanges is called as many times as parameters would have been passed.
3-Both counters (observable and setInterval) works but they run twice and I stopped just one. I lost the reference to the first one.
4-Components are destroyed once you change page on segments. (remember I have a segments of three pages and one component on each page)
5-You can use [ngModel] and (ionChange) but with the second one you don’t need first one getting data on $event variable.

I leave these here in case someone have the same issues.
Now I will publish a new suggect

2 Likes
16

Cool!

Tapping into ngOnChanges may likely become a performance killer

Next level: RXJS and BehaviorSubject

Did u see the other lifecycle hooks of angular and the ones Ionic adds to the sugar?

17

I need to be awared when both parameter are ready. ngOnInit runs once before any parameter. On my case parameters only change once segments has entered to the first page and I verified that it runs only twice. I have a big if checking thread only enter when both parameters has set.
Your approach is very interesting. Could you send an example?
I have a component with two @Input. I need to begin component logic once both parameters are ready.
Thanks in advance

18
19

I will check that. Being honest, I can understand it at fly. I need some analizes.