title: Is there a way to use only one p-toast for all messages?
body: <p>I am using primeng p-toast to display messages.</p>
  <p>I placed p-toast html in app.component.html</p>
  <pre><code>&lt;div class=&quot;main-container&quot;&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  &lt;p-toast position=&quot;top-right&quot; key=&quot;main&quot;&gt;&lt;/p-toast&gt;
  </code></pre>
  <p>and imported ToastModule and MessageService in a sharedModule so any components can use it.</p>
  <p>Tried to display a message using this on many of the child components, but it did not display</p>
  <pre><code>this.messageService.add({
            key: &quot;main&quot;,
            severity: &quot;info&quot;,
            detail: &quot;Ready to scan&quot;,
          });
  </code></pre>
  <p>I still have to add p-toast html in the child's html to make it work.</p>
  <p>The child component is loaded thru app-routing.module</p>
  <pre><code>const routes: Routes = [
    { path: &quot;&quot;, component: HomeComponent },
    {
      path: &quot;catalogs&quot;,
      loadChildren: () =&gt;
        import(&quot;./catalog/catalog.module&quot;).then((m) =&gt; m.CatalogModule)
    }];
  
  @NgModule({
    imports: [
      RouterModule.forRoot(routes)
    ],
    exports: [RouterModule],
  })
  export class AppRoutingModule {}
  </code></pre>
  <p>Is there a way to declare only one , and child components call on messageService.add can display the message on that p-toast?</p>