CODEWITHSUNDEEP
angular
code1
code1

Reputation: 9029

ng2-toasty in angular2 is not working

I installed ng2-toasty: "^2.3.0" in my angular 2.0.0 application.

I included these lines in app module

import { ToastyModule } from 'ng2-toasty';

@NgModule({
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.        
        ToastyModule.forRoot()
    ],

And in my ts file I have code like 

import { ToastyService, ToastyConfig, ToastOptions, ToastData } from 'ng2-toasty';

constructor(private toastyService: ToastyService, private toastyConfig: ToastyConfig) {
        this.toastyConfig.theme = 'default';
    }

 onClick() {
        debugger;
        this.toastyService.default({
            title: "Toast It!",
            msg: "Mmmm, tasties...",
            showClose: true,
            timeout: 5000,
            theme: "default"
        });

        // 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);
    }

and in HTML I have 

<button (click)="onClick()">Click</button>
        <ng2-toasty></ng2-toasty>

I am able to get the message, but it does not come as notification , it just comes as plain text message. Can you please let me what is missed out.

Upvotes: 1

Views: 3288

Answers (1)

D. Gibbs
D. Gibbs

Reputation: 560

I had the same issue. You need to import one of the .css files from the module in your html. I ended up copying the bootstrap.css into its own file /assets/vendors/toasty-bootstrap.css (since I didn't want to reference inside of my ng_modules directory).

There might be a better way to reference the file inside of the component but 

<link href="/assets/vendors/toasty-bootstrap.css" rel="stylesheet">

<button (click)="onClick()">Click</button>
    <ng2-toasty></ng2-toasty>

Upvotes: 1

Related Questions