Angular material toast using Typescript

Question

i am new to Typescript and want to display a Angular Material Dialog with typescript but i am not able to configure the Controller because typescript says "content" does not exist. Which is right but how do i say Typescript that it exists?

Here is my Code:

 interface IToastService {
    displayError(text: string): void;
    displaySuccess(text: string): void;
}

export class ToastService implements IToastService {
    public static $inject = ['$mdToast'];
    constructor(
        private $mdToast: angular.material.IToastService) { }

    displayError(text: string): void {
        this.$mdToast.show({
            position: 'top left',
            controller: () => {
                this.content = text; // the Error Line
            },            
            controllerAs: 'toast',
            template: '<md-toast>\
                        {{ toast.content }}\
                        <md-button ng-click="toast.cancel()" class="md-warn">\
                                 <md-icon md-font-set="material-icons"> clear </md-icon>\
                    </md-button>\
                </md-toast>',
            hideDelay: 0
        });
    }

    displaySuccess(text: string): void {

        this.$mdToast.show({

            template: '<md-toast>\
                        {{ toast.content }}\
                           <md-icon md-font-set="material-icons" style="color:#259b24"> done </md-icon>\
                </md-toast>',
            hideDelay: 1000,
            position: 'top left',
            controller: () => {
                this.content = text;
            },
            controllerAs: 'toast'
        })
    }

}

PSL · Accepted Answer · 2015-11-02 14:13:50Z

1

You should just declare it your class upfront, i.e

export class ToastService implements IToastService {
   public content:string; //Here

   public static $inject = ['$mdToast'];
//...

But it looks like you are using arrow operator. It means the property content will not be attached to the controller instance of the modal, instead to the ToastService instance (when the modal controller is instantiated). I believe you would need to declare it as normal function.

this.$mdToast.show({
        position: 'top left',
        controller: function() {
            this.content = text; //Now this is your controller instance
        },            
        controllerAs: 'toast',
        //...
    });

You should also be able to pass the argument text as resolve of the toast and accept it as argument of the controller. i.e

    this.$mdToast.show({
        position: 'top left',
        controller: function(content:string) {
            this.content = content; 
            //If you define this as class, you could do "private content:string"
        },            
        controllerAs: 'toast',
        resolve:{
           content: () => text
           //Not sure if it is very specific only about a promise, if so you
           //would need to inject $q and do "content: ()=> $q.when(test)"
        }
        //...
    });

edited Nov 2, 2015 at 14:13

answered Nov 2, 2015 at 13:52

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Flowlicious Over a year ago

although i didnt understand your second example the first one worked great for me. Thank you!

Collectives™ on Stack Overflow

Angular material toast using Typescript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related