web-dev-qa-db-fra.com

Comment afficher les notifications dans Angular 2

Dans AngularJS (version 1.x), nous avions ng-notify pour l’affichage des notifications, nous aimerions savoir.

Une idée comment faire ça?

angularnotifications
10
refactor

J'ai utilisé le package PrimeNG, qui comprend de nombreux composants de l'interface utilisateur. Il existe un composant de messages pour afficher les notifications: PrimeNG - Messages Component

6
Leon K

Une autre option est ng2-toasty

Voici les étapes:

1) Installer avec - npm install ng2-toasty --save

2) Mise à jour de systemjs.config.js 

System.config({
    map: {
        'ng2-toasty': 'node_modules/ng2-toasty/bundles/index.umd.js'
    }
});

3) Import ToastyModule

import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from '@angular/core';
import {ToastyModule} from 'ng2-toasty';

@NgModule({
    imports: [
        BrowserModule,
        ToastyModule.forRoot()
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

4) Utilisez ToastyService pour votre application

import {Component} from '@angular/core';
import {ToastyService, ToastyConfig, ToastOptions, ToastData} from 'ng2-toasty';

@Component({
    selector: 'app',
    template: `
        <div>Hello world</div>
        <button (click)="addToast()">Add Toast</button>
        <ng2-toasty></ng2-toasty>
    `
})
export class AppComponent {

    constructor(private toastyService:ToastyService, private toastyConfig: ToastyConfig) { 
        // Assign the selected theme name to the `theme` property of the instance of ToastyConfig. 
        // Possible values: default, bootstrap, material
        this.toastyConfig.theme = 'material';
    }

    addToast() {
        // Just add default Toast with title only
        this.toastyService.default('Hi there');
        // Or create the instance of ToastOptions
        var toastOptions:ToastOptions = {
            title: "My title",
            msg: "The message",
            showClose: true,
            timeout: 5000,
            theme: 'default',
            onAdd: (toast:ToastData) => {
                console.log('Toast ' + toast.id + ' has been added!');
            },
            onRemove: function(toast:ToastData) {
                console.log('Toast ' + toast.id + ' has been removed!');
            }
        };
        // Add see all possible types in one shot
        this.toastyService.info(toastOptions);
        this.toastyService.success(toastOptions);
        this.toastyService.wait(toastOptions);
        this.toastyService.error(toastOptions);
        this.toastyService.warning(toastOptions);
    }
}

Démo simple disponible ici - http://akserg.github.io/ng2-webpack-demo/#/toasty

Exemple de code disponible ici - https://github.com/akserg/ng2-systemjs-demo

4
Sanket

ng2-notify-popup pour Angular 2 est basé sur ng-notify . Vous pouvez essayer de l'utiliser.

1
Vaibhav Bansal

Vérifiez ce paquet npm, il est super facile à utiliser et peut être exactement ce dont vous avez besoin!

https://www.npmjs.com/package/angular-ntf

1
Santiago

Vous pouvez le faire avec un Snackbar

Importation

import {MatSnackBarModule} from '@angular/material/snack-bar';

Affichage:

let snackBarRef = snackBar.open('Message archived');

Rappels:

snackBarRef.afterDismissed().subscribe(() => {
  console.log('The snack-bar was dismissed');
});


snackBarRef.onAction().subscribe(() => {
  console.log('The snack-bar action was triggered!');
});

snackBarRef.dismiss();
1
Willi Mentzel

J'ai recommandé 'angular2-notifications' est facile et flexible à utiliser.

pour plus de détails et démo: https://jaspero.co/resources/projects/ng-alerts

De plus nous pouvons faire des alertes pour les pousser avec ng2-alerts

0
Anouar Mokhtari