Is there a way to use only one p-toast for all messages?

Question

I am using primeng p-toast to display messages.

I placed p-toast html in app.component.html

<div class="main-container">
  <router-outlet></router-outlet>
</div>
<p-toast position="top-right" key="main"></p-toast>

and imported ToastModule and MessageService in a sharedModule so any components can use it.

Tried to display a message using this on many of the child components, but it did not display

this.messageService.add({
          key: "main",
          severity: "info",
          detail: "Ready to scan",
        });

I still have to add p-toast html in the child's html to make it work.

The child component is loaded thru app-routing.module

const routes: Routes = [
  { path: "", component: HomeComponent },
  {
    path: "catalogs",
    loadChildren: () =>
      import("./catalog/catalog.module").then((m) => m.CatalogModule)
  }];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Is there a way to declare only one , and child components call on messageService.add can display the message on that p-toast?

Answer 1

I have fixed the problem with the help of @yurzui

Previously, ToastModule and MessageService are imported in SharedModule so that I won't have to repeatedly import stuffs to other modules I created.

I just moved ToastModule and MessageService imports from SharedModule to AppModule since <p-toast> is only in app.component.html