Come utilizzare le notifiche di avviso (Toastr) in Angular 9

Blog

Come utilizzare le notifiche di avviso (Toastr) in Angular 9

Questo articolo fornirà un esempio di come utilizzare il tostapane in Angular 9. Vorrei mostrarti Angular 9 - notifiche di avviso (toastr). Questo esempio ti aiuterà a creare un avviso di tostapane in Angular 9. Questo articolo approfondisce l'avviso di tostapane Angular 9. Qui, Creazione di un esempio di base di avviso di tostapane Angular 9.



Useremo il pacchetto ngx-toastr npm per la notifica di toastr nell'applicazione angular 9. abbiamo bisogno di installare due pacchetti npm ngx-toastr e @angular/animations che forniscono messaggi di successo, errore, avviso e avviso di informazioni.

come cambiare la password di msn

Ti darò un esempio molto semplice e passo dopo passo in modo da poter implementare facilmente la notifica del tostapane nella tua applicazione angolare 9. puoi vedere anche l'anteprima qui sotto per l'avviso.



Passaggio 1: crea una nuova app

Puoi facilmente creare la tua app angolare 9 usando il comando qui sotto:

ng new my-new-app

Passaggio 2: installa Toastr

In questo passaggio, installeremo i pacchetti ngx-toastr e @angular/animations npm. quindi eseguiamo entrambi i comandi come di seguito:



npm install ngx-toastr --save npm install @angular/animations --save

Ora, dobbiamo includere toastr css come node_modules/ngx-toastr/toastr.css, quindi aggiungiamolo al file angular.json.

angular.json

..... 'styles': [ 'node_modules/ngx-toastr/toastr.css', 'src/styles.css' ], .....

Passaggio 3: modulo di importazione

In questo passaggio, dobbiamo importare ToastrModule e BrowserAnimationsModule nel file app.module.ts. quindi importiamolo come di seguito:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { ToastrModule } from 'ngx-toastr'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, ToastrModule.forRoot() ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Passaggio 4: creare un servizio per la notifica

Qui creeremo una notifica separata per Toastr. quindi puoi usare showSuccess(), showError(), showInfo() e showWarning() in qualsiasi componente.

quindi mettiamo il codice qui sotto:

esegui il comando seguente:

ng generate service notification

src/app/notification.service.ts

www.aol mail accedi
import { Injectable } from '@angular/core'; import { ToastrService } from 'ngx-toastr'; @Injectable({ providedIn: 'root' }) export class NotificationService { constructor(private toastr: ToastrService) { } showSuccess(message, title){ this.toastr.success(message, title) } showError(message, title){ this.toastr.error(message, title) } showInfo(message, title){ this.toastr.info(message, title) } showWarning(message, title){ this.toastr.warning(message, title) } }

Passaggio 5: file di visualizzazione aggiornato

Ora qui, aggiorneremo il nostro file html. creeremo semplici quattro pulsanti per i messaggi di avviso.

quindi mettiamo il codice qui sotto:

src/app/app.component.html

Success Toaster Error Toaster Info Toaster Warning Toaster

Passaggio 6: utilizzare il file ts del componente

Ora dobbiamo aggiornare il nostro file component.ts qui useremo il servizio di notifica e l'avviso di chiamata, aggiorniamo come di seguito:

src/app/app.component.ts

import { Component } from '@angular/core'; import { NotificationService } from './notification.service' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'toaster-not'; constructor(private notifyService : NotificationService) { } showToasterSuccess(){ this.notifyService.showSuccess('Data shown successfully !!', 'ItSolutionStuff.com') } showToasterError(){ this.notifyService.showError('Something is wrong', 'ItSolutionStuff.com') } showToasterInfo(){ this.notifyService.showInfo('This is info', 'ItSolutionStuff.com') } showToasterWarning(){ this.notifyService.showWarning('This is warning', 'ItSolutionStuff.com') } }

Ora siamo pronti per eseguire entrambi:

Esegui l'app angolare:

ng serve

Spero possa aiutarti…

#angular #webdev #javascript