Search code examples
angularservicemessageprimeng

Angular 2 Primeng Message Service not showing message

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