title: Global component Ionic 3
body: <p>I'm developing a <strong>PWA on ionic 3 with Angular 4</strong> and I've failed multiple times trying to make a nice UI that show's in-app notifications about events.</p>
  
  <p>I have a <strong>NotificationsService</strong> that is responsable for everything that has to do with getting the notification from Firebase.</p>
  
  <p>My initial approach was to define a UI component <em>(a.k.a notification-box)</em> which would <strong>observe a property</strong> in the Notification Service and consume the notification provided by the service and display them nicely on top of the screen.</p>
  
  <p>This sounds all nice and good but I created this component and had 3 issues:</p>
  
  <ul>
  <li><p>Ionic 3 <strong>doesn't allow (AFAIK) a component to be 'global'</strong> and present in all app pages.</p></li>
  <li><p>Including the tag of my component <strong>&lt;notification-box&gt;&lt;/notification-box&gt;</strong> on top of every page it's not a very good idea because components get instantiated and destroyed multiple times making it difficult to keep Subscriptions to the Observable notification property in the Service, and <em><strong>this could lead to a notification not arriving in between switching of pages</strong></em>.</p></li>
  <li><p>If a notification where to arrive with a modal open, the notification would display behind the modal and my intent is to show notifications <strong>always on top</strong>.</p>
  
  <hr></li>
  </ul>
  
  <p>I ended up using <strong>ToastController</strong> from <em>ionic-angular</em> which always displays on top no matter what (although it's a bit ugly and I want to switch to something like <strong><a href="https://jaspero.co/resources/projects/ng-notifications" rel="nofollow noreferrer">angular2-notifications</a></strong>).</p>
  
  <p>How did Ionic achieve this "always on top" behaviour? Is there any way I can replicate that with a class of my own or Extend the ToastCtrl?</p>