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.

Solution 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;
    }
}

Solution 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().

Solution 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

Comments

[Shimrod]

it doesn't seem to fit my needs, I placed a log inside this callback, and it's only called once (regardless if my component is visible or not).

[Günter Zöchbauer]

Angular doesn't have a way to know when a component becomes visible if it's just hidden behind another DOM element.. If you use *ngIf="" to show/hide, then component when the tab is selected or deselected, then ngAfterViewInit() is called every time.

[Shimrod]

That's a great idea, however I don't thnik it work in my case because the tabcontrol I use is from primeng and they only provide an event on tab change before the tab has actually changed => my component is not visible at this time...

[Chris McCowan]

ngAfterViewInit is called after the view is initialized, not after the element is viewed

[dGayand]

What is m.nativeElement ?

[Thomas Bindzus]

@dGayand nativeElement points to the native DOM HTML element.

[Daniel Delgado]

This may work, but consider that ngAfterContentChecked is been executed at any kind of event in father or child trhee component. Its maybe called 100 times and you only really require 1 execution of this 100 times

[Ced]

very strange that Angular framework is not providing a solution. ngAfterContentChecked didn't work for me. It was not triggered when componant was removed from DOM ex: with ngIf. developer.mozilla.org/en-US/docs/Web/API/HTMLElement/…