Materialize.toast in angular 2

user_4767593 0
Viewed 4776

I am working on angular 2. I have used materialize-css which works fine with classes But problem came with materialize toast. I Configured materialize with gulpfile.js do i need to add any other js file in gulpfile?

<a class="btn" (click)="Materialize.toast('I am a toast', 4000)">Toast!</a>

Used this console shows error
Materialize is not defined

materialize angular
4 Answers

your component.ts

import { toast } from 'angular2-materialize';

ngOnInit() {}

miToast() {
    toast("I am the best toast there is!", 4000);
}

Your componen.html

<a class="btn" (click)="miToast()">Toast!</a>

or you can also use

Your component.ts

// imports...

declare var Materialize: any;

ngOnInit() {}

miToast(){
    Materialize.toast("I am the best toast there is!", 4000);
}
user_107363900

Well looks like is too late but for the people comming from the future

This is how is imported

import {Toast} from 'materialize-css';

then on the template

<a class="btn" (click)="toast()">Toast!</a>

and finally on the typescript file for the component

toast() {
// to avoid lint warnings
// tslint:disable-next-line:no-unused-expression
new Toast({
  html: 'I am a toast',
  classes: 'rounded',
  displayLength: 4000
});

}

thats all

user_107411520
Related