[FIXED] Angular 2 Primeng Message Service not showing message

Issue

Below predefined Primeng message service used to show popup notification

import { MessageService } from "primeng/components/common/messageservice

@Component({
    selector: "student-wizard",
    providers: [MessageService],
    templateUrl: "student-wizard.component.html",
    styleUrls: ["student-wizard.component.css"]
})

constructor(
        private messageService: MessageService)
{}

From HTML we are calling below method :

 public hideDialog(): void {
        this.messageService.add({
            severity: "info", 
            summary: "Student Updation Terminated",
            detail: "No updation performed"
        });
        this.router.navigateByUrl("studentTask", { relativeTo: this.route });
    }

But, on execution there is no error and no popup message shown.

Solution

This is because you are navigating to some another route so it will not show any message.

To avoid this move your selector to app level like in app.component.html

<p-growl [(value)]="globalService.msgs"></p-growl>

and try to push all messages from some global service to it will enable your navigation
as well as messages

Answered By – Pardeep Jain

Answer Checked By – Laura B. (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published