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