CODEWITHSUNDEEP
angulartypescriptionic4
Vijay Sandhu
Vijay Sandhu

Reputation: 21

How to detect a new component is loaded in app component or in common place?

I am using angular with ionic framework. And to navigate from one component to other I am using ionic nav controller. All I want is whichever component is loaded, it gives the name of that component at a common place or in app component

Upvotes: 0

Views: 747

Answers (1)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

You can use a global service with rxjs subject to track any component activity like created, destroy or others

TrackerService

@Injectable({providedIn:"root"}) // 👈 root
export class TrackerService {

  private _sub = new Subject();
  constructor() { }

  public post(data:any) { // 👈 send a data to subscriber 
    this._sub.next(data)
  }

  public subscribe(fx:any) : Subscription {  // 👈 tracker activity 
    return this._sub.subscribe(fx);
  }

}

in any component just inject the tracker server and post a data at any case init , destroy or maybe at some cases like login ...

as example 

  constructor(private _tracker:TrackerService) { }

  ngOnInit() {
    this._tracker.post({message:'FirstComponent is active'}); // send 📧
  }

  ngOnDestroy() { 
    this._tracker.post({message:'FirstComponent is deactive'});

  }

and I have subscribe to the tracker service at app component like this 

  ngOnInit() {

    this._tracker.subscribe(result => console.log(result)); // arrived 📫

  }

tracker subscribe method return a subscription object so you can unsubscribe later

stackblitz demo 🔥🔥

Upvotes: 1

Related Questions