title: PrimeNG Message & Toast worked in Component but not in Service
body: <p>I have a working message alert in component using PrimeNG framework.</p>
  
  <p>@Component</p>
  
  <pre><code>@Component({
      selector: 'app-client',
      templateUrl: './client.component.html',
      styleUrls: ['./client.component.css'],
      providers: [MessageService],
  })
  </code></pre>
  
  <p>Constructor</p>
  
  <pre><code>private msg: MessageService,
  </code></pre>
  
  <p>Component method</p>
  
  <pre><code>this.msg.add({severity:'success', summary: 'Success Message', detail:'Order submitted'});
  </code></pre>
  
  <p>But once i moved to a service's method and include the 'ClientService' in component</p>
  
  <pre><code>import { ClientService } from '../../../shared/services/client.service'
  </code></pre>
  
  <p>Import message in client.service.ts</p>
  
  <pre><code>import { MessageService } from 'primeng/api';
  ...
  
  @Injectable({
    providedIn: 'root'
  })
  </code></pre>
  
  <p>method in ClientService</p>
  
  <pre><code>...
  this.msg.add({severity:'success', summary:'Success', detail: msg});
  ...
  </code></pre>
  
  <p>There ain't any error messages, also no toast prompt. I tried to understand the official doc
  <a href="https://www.primefaces.org/primeng/showcase/#/toast" rel="nofollow noreferrer">https://www.primefaces.org/primeng/showcase/#/toast</a></p>
  
  <blockquote>
    <p>A message is displayed using a MessageService, make sure your
    component has an injectable MessageService defined as a provider
    otherwise Toast cannot be utilized.</p>
  </blockquote>
  
  <p>But i have no idea how to 'inject' messageservice.</p>
  
  <p>sample project here <a href="https://stackblitz.com/edit/d-toast" rel="nofollow noreferrer">https://stackblitz.com/edit/d-toast</a></p>