It is working, but not as It should. Instead of a proper toast
component, message is simply displayed as a normal text after i press submit button.
I followed everything written ni the Documentation. Here are my files.
package.json
"dependencies": {
...
"primeicons": "^2.0.0",
"primeng": "^8.0.3",
...
},
angular.json
"styles": [
"src/styles.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
import { ToastModule } from 'primeng/toast';
import { MessageService } from 'primeng/api';
@NgModule({
declarations: [
...
],
imports: [
BrowserModule,
BrowserAnimationsModule,
...
ToastModule
],
providers: [MessageService],
bootstrap: [AppComponent]
})
export class AppModule { }
contribute.component.ts
import { Component, OnInit } from '@angular/core';
...
import { MessageService } from 'primeng/components/common/api';
@Component({
selector: 'app-contribute',
templateUrl: './contribute.component.html',
styleUrls: ['./contribute.component.css']
})
export class ContributeComponent implements OnInit {
constructor(private messageService: MessageService, ...) { }
addSingle() {
this.messageService.add({severity:'success', summary:'Service Message', detail:'Via MessageService'});
}
ngOnInit() {
...
}
onSubmit() {
...
this.addSingle();
}
}
contribute.component.html
<div class="container">
<div class="row pt-5">
<div class="col-md-12 col-lg-12 col-sm-12 bg-light">
<form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
<div class="form-group">
...SOME INPUT FIELDS
</div>
<p-toast position="top-left"></p-toast>
<button class="btn btn-primary mt-3 mb-3">Submit</button>
</form>
</div>
</div>
</div>
I mean, Its working. But not like a good toast
component. Please correct me.
Overview. The Angular Toast is a small, nonblocking notification pop-up. A toast is shown to users with readable message content at the bottom of the screen or at a specific target and disappears automatically after a few seconds (time-out) with different animation effects.
In Angular 8: Try the following method
Pre Steps:
In app.module.ts:
import { MessagesModule } from 'primeng/messages';
import { MessageModule } from 'primeng/message';
import { ToastModule } from 'primeng/toast';
and under the imports
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
AppRoutingModule,
MessagesModule,
MessageModule,
ToastModule,
],
Step 1: Inject the message service in component for your choice like below
import { MessageService } from 'primeng/api';
Step 2: On the same component, you need to add providers like below
@Component({
selector: 'app-import-project',
templateUrl: './import-project.component.html',
styleUrls: ['./import-project.component.css'],
providers: [MessageService],
})
Step 3: Declare the message service in constructor
constructor(
private messageService: MessageService,
private router: Router,
private progress: NgProgress
) {}
Step 4: On the same component.ts file:
Assuming you want to throw error message
showError() {
console.log('Authentication Failed');
this.messageService.add({
severity: 'error',
summary: 'Authentication Failed',
detail: 'API Key or URL is invalid.',
});
}
Step 5: In the relevant.html file. Add the HTML tag like below
<p-toast position="bottom-center"></p-toast>
Output: This should definitely throw the proper toast like below
Hope this will solve your problem instead of creating new project every time. Please give a try.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With