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'
        })
    }

}

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