Prime Ng Toast & Messages
Today I want to show you how to use prime ng toast and message component. This will be a good primeNg toast example. First, we have to install primeng with npm to our angular project. We can do it by running these commands in our node terminal. I am using VS Code for developing UI projects. So its easy to do it with VSCode.
1 2 |
npm install primeng --save npm install primeicons --save |
And we must add MessageService and ToastModule to app.module.ts file.
1 2 3 4 5 6 7 8 |
import {MessageService} from 'primeng/api'; import {ToastModule} from 'primeng/toast'; . . imports: [ToastModule], . . providers: [MessageService ], |
After installing packages, we must include them in our component.ts file and use it in the functions to show messages.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { MessageService } from 'primeng/components/common/api'; .. constructor(private messageService: MessageService ,private router: Router){} // some code you write .. search() { this.div_visible = true; this.startdate = ((document.getElementById("startdate") as HTMLInputElement).value); this.finishdate = ((document.getElementById("finishdate") as HTMLInputElement).value); if (this.selectedUserKod == 0) { //just for an error message .. this.messageService.add({severity: 'error', summary: 'error Message', detail: 'User can not be empty!'}); this.div_visible = false; return; } |
And we need to call toast component in html file to show messages to user.
1 |
<p-toast [style]="{marginTop: '80px'}"></p-toast> |
Dont forget to add these css codes to angular.json file.
1 2 3 4 5 |
"styles": [ "./node_modules/primeicons/primeicons.css", "./node_modules/primeng/resources/themes/nova-light/theme.css", "./node_modules/primeng/resources/primeng.min.css" ] |
You can have a look at my other post about Top 10 Developer Tools
If you have question do not forget to write from the chat button next to it or from the comment
Thank you so much for providing a great example. You have saved my time. I should propose your website better than the PrimeNG official documentation 🙂
Thank you for your nice thoughts. You can suggest my blog to your friends.
How to add Count to message
I got it
Depois que instalei a versão meu projeto parou por conflitos.
hi ,thanks foe the demo bit my toast is not showing in a toats he is showing like a text in mu Interface