Event each time component becomes visible

Question

Is there a way in Angular2 to have an event fired when my component becomes visible? It is placed in a tabcontrol and I want to be notified when the user switches. I'd like my component to fire an event.

Answer 1

What I finally did (which is not very beautiful but works while I don't have a better way to do it...) is to use the ngAfterContentChecked() callback and handle the change myself.

@ViewChild('map') m;
private isVisible: boolean = false;
ngAfterContentChecked(): void
{
    if (this.isVisible == false && this.m.nativeElement.offsetParent != null)
    {
        console.log('isVisible switched from false to true');
        this.isVisible = true;
        this.Refresh();
    }
    else if (this.isVisible == true && this.m.nativeElement.offsetParent == null)
    {
        console.log('isVisible switched from true to false');
        this.isVisible = false;
    }
}

Answer 2

There is no such event, but if you're using a tab control, the proper way to do this would be to create a tab change @Output for your tab control if it's custom, otherwise, most tab controls (like ng-bootstrap) have some tab change event as well.

If your component has to be aware of this, you can use this tab change event to detect which tab is visible, and if you know which tab is visible, you also know if your component is visible or not. So you can do something like this:

onTabChange(event) {
    this.currentTab = /** Get current tab */;
}

And then you can send it to your component itself if you have an input:

@Input() activated: boolean = false;

And then you can apply it with:

<my-component [activated]="currentTab == 'tabWithComponent'"></my-component>

Now you can listen to OnChanges to see if the model value activated changed to true.

---

You can also refactor this to use a service with an Observable like this:

@Injectable()
export class TabService {
  observable: Observable<any>;
  observer;

  constructor() {
    this.observable = Observable.create(function(observer) {
      this.observer = observer;
    });
  }
}

When a component wishes to listen to these changes, it can subscribe to tabService.observable. When your tab changes, you can push new items to it with tabService.observer.next().

Answer 3

You can use the ngAfterViewInit() callback

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Update

The new Intersection Observer API can be used for that https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API See also https://stackoverflow.com/a/44670818/217408

Answer 4

Best way to work around this limitation of Angular is to use a shared service that provides a Subject your component can subscribe to. That way new values could be pushed onto the Observable and the components which subscribe get the newest data and can act accordingly.

Fyi: The difference between a normal Observable and a Subject is that a Subject is multicast whereas an Observable could only be subscribed to by one Subscriber.

As a small example I show you a possible implementation of a shared-service and following the subscription inside the component that needs this new data.

Shared-service:

// ...

private actualNumberSubject = new Subject<number>()
public actualNumber$ = this.actualNumberSubject.asObservable()

/**
 * @info CONSTRUCTOR
 */
constructor() {}

/**
 * @info Set actual number
 */
setActualNumber(number: number) {
    this.actualNumberSubject.next(internalNumber)
}

// ...

Push new value onto the subject from anywhere where shared.service is imported:

// ...
this.sharedService.setActualNumber(1)

Subscribe to sharedService.actualNumber$ in component to process/display that new data:

// ...
this.sharedService.actualNumber$.subscribe(number => {
    console.log(number)
    
    // e.g. load data freshly, etc.
})

// ...

Answer 5

For those watching at home, you can now use ngAfterContentInit() for this, at least on Ionic anyway. https://angular.io/guide/lifecycle-hooks

Answer 6

I have the same purpose and cannot get a satisfy approach to it. The first answer will call so many times. There is a compromised way I used, of course, not elegant either. In parent component, I set a method:

parentClick() {
  setTimeout(() => {
    // TO-DO 
    This.commonService.childMethod();
  }, time);
}

Maybe the method not accurate in time, but in some way, you reach the destiny.