How to use PrimeNg Toast correctly in Angular 8

Question

It is working, but not as It should. Instead of a proper toast component, message is simply displayed as a normal text after i press submit button.

I followed everything written ni the Documentation. Here are my files.

package.json

"dependencies": {
    ...
    "primeicons": "^2.0.0",
    "primeng": "^8.0.3",
    ...
  },

angular.json

"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"
],

app.module.ts

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 { }

contribute.component.ts

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();
  }
}

contribute.component.html

<div class="container">
  <div class="row pt-5">
    <div class="col-md-12 col-lg-12 col-sm-12 bg-light">
      <form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
          ...SOME INPUT FIELDS
        </div>
        <p-toast position="top-left"></p-toast>
        <button class="btn btn-primary mt-3 mb-3">Submit</button>
      </form>
    </div>
  </div>
</div>

I mean, Its working. But not like a good toast component. Please correct me.

Tried. But No Sir. Not working. The text is now displayed below the button. Still not getting proper toast component. — Tanzeel
Are you sure, that the contribute component is under the app module and not in any other module? — Nitin Avula
Yes. It is there in the declarations array. It is there. Yes I am sure. — Tanzeel
@Tanzeel check this it is working stackblitz.com/edit/angular-ewtxe4 — Muhammed Albarmavi

Ragavan Rajan Ragavan Rajan · Accepted Answer · 2019-09-19T09:44:39

In Angular 8: Try the following method

Pre Steps:

In app.module.ts:

import { MessagesModule } from 'primeng/messages';
import { MessageModule } from 'primeng/message';
import { ToastModule } from 'primeng/toast';

and under the imports

    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        AppRoutingModule,
        MessagesModule,
        MessageModule,
        ToastModule,
],

Step 1: Inject the message service in component for your choice like below

import { MessageService } from 'primeng/api';

Step 2: On the same component, you need to add providers like below

@Component({
    selector: 'app-import-project',
    templateUrl: './import-project.component.html',
    styleUrls: ['./import-project.component.css'],
    providers: [MessageService],
})

Step 3: Declare the message service in constructor

  constructor(
        private messageService: MessageService,
        private router: Router,
        private progress: NgProgress
    ) {}

Step 4: On the same component.ts file: Assuming you want to throw error message

   showError() {
    console.log('Authentication Failed');
    this.messageService.add({
        severity: 'error',
        summary: 'Authentication Failed',
        detail: 'API Key or URL is invalid.',
    });
}

Step 5: In the relevant.html file. Add the HTML tag like below

<p-toast position="bottom-center"></p-toast>

Output: This should definitely throw the proper toast like below

Hope this will solve your problem instead of creating new project every time. Please give a try.

How to use PrimeNg Toast correctly in Angular 8

1 Answers