primefaces/primeng

Docs(toast): A missing code in the toast sticky example

Open

#19407 opened on Feb 18, 2026

View on GitHub
 (0 comments) (0 reactions) (0 assignees)CSS (10,366 stars) (4,585 forks)batch import
Component: DocumentationType: Buggood first issue

Description

Describe the bug

In the Toast component docs there is a missing code in the sticky example and if the user trying to copy the code or open it with Stackblitz it will not work.

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/run?file=src%2Fapp%2Ftoast-sticky-demo.ts

Environment

Angular Version: 21 PrimeNG Version: 21 Browser: Chrome 144 Node Version: 22

Angular version

21

PrimeNG version

v21

Node version

22

Browser(s)

Chrome 144

Steps to reproduce the behavior

  1. Go to the sticky example of the toast docs
  2. Try to open the code with Stackblitz.
  3. You will see the show function is missing from the class.

Expected behavior

The code should be like this:

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ThemeSwitcher } from './themeswitcher';
import { ButtonModule } from 'primeng/button';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
import { MessageService } from 'primeng/api';

@Component({
    selector: 'toast-sticky-demo',
    template: `
        <theme-switcher />
        <div class="card flex justify-center">
            <p-toast />
            <div class="flex flex-wrap gap-2">
                <p-button pRipple (click)="show()" label="Sticky" />
                <p-button pRipple (click)="clear()" severity="secondary" label="Clear" />
            </div>
        </div>
    `,
    standalone: true,
    imports: [CommonModule, ThemeSwitcher, ButtonModule, ToastModule, RippleModule],
    providers: [MessageService]
})
export class ToastStickyDemo {
    private messageService = inject(MessageService);

    show() {
        this.messageService.add({ severity: 'info', summary: 'Sticky', detail: 'Message Content', sticky: true });
    }

    clear() {
        this.messageService.clear();
    }
}

Contributor guide