primefaces/primeng
View on GitHubDocs(toast): A missing code in the toast sticky example
Open
#19407 opened on Feb 18, 2026
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
- Go to the sticky example of the toast docs
- Try to open the code with Stackblitz.
- 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();
}
}