title: How to use PrimeNg Toast correctly in Angular 8
body: <p>It is working, but not as It should. Instead of a proper <code>toast</code> component, message is simply displayed as a normal text after i press submit button.
  <a href="https://i.stack.imgur.com/HjIcU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HjIcU.png" alt="enter image description here"></a></p>
  
  <p>I followed everything written ni the Documentation. Here are my files.</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>"dependencies": {
      ...
      "primeicons": "^2.0.0",
      "primeng": "^8.0.3",
      ...
    },
  </code></pre>
  
  <p><strong>angular.json</strong></p>
  
  <pre><code>"styles": [
     "src/styles.css",
     "node_modules/primeicons/primeicons.css",
     "node_modules/primeng/resources/themes/nova-light/theme.css",
     "node_modules/primeng/resources/primeng.min.css"
  ],
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  ...
  import { ToastModule } from 'primeng/toast';
  import { MessageService } from 'primeng/api';
  
  
  
  @NgModule({
    declarations: [
      ...        
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      ...
      ToastModule
    ],
    providers: [MessageService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>contribute.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  ...
  import { MessageService } from 'primeng/components/common/api';
  
  @Component({
    selector: 'app-contribute',
    templateUrl: './contribute.component.html',
    styleUrls: ['./contribute.component.css']
  })
  export class ContributeComponent implements OnInit {
    constructor(private messageService: MessageService, ...) { }
  
    addSingle() {
      this.messageService.add({severity:'success', summary:'Service Message', detail:'Via MessageService'});
    }
  
    ngOnInit() {
      ...
    }
  
    onSubmit() {
      ...
      this.addSingle();
    }
  }
  </code></pre>
  
  <p><strong>contribute.component.html</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row pt-5"&gt;
      &lt;div class="col-md-12 col-lg-12 col-sm-12 bg-light"&gt;
        &lt;form [formGroup]="editorForm" (ngSubmit)="onSubmit()"&gt;
          &lt;div class="form-group"&gt;
            ...SOME INPUT FIELDS
          &lt;/div&gt;
          &lt;p-toast position="top-left"&gt;&lt;/p-toast&gt;
          &lt;button class="btn btn-primary mt-3 mb-3"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I mean, Its working. But not like a good <code>toast</code> component. Please correct me.</p>