Sticky toasts that cannot be dismissed?

[Sammaye]

I have two toasts that I would like to use:

• You are offline
• App update ready to install

However, I need these to stay on top and not be able to be dismissed by the auto dismiss in the service.

I was thinking maybe there was a way of using nested sub containers, like one container for one set of toasts and another for the rest, however, I cannot seem to find a solution.

I am surprised no one has come with this before.

Anyone else had this problem and if so any solutions?

[RAJEEV2510]

You have to disable timeout for auto dismissal off

[Sammaye]

I tried that but it still does it if the global autoDismiss is true

[RAJEEV2510]

Okay I will try to fix this issue

[RAJEEV2510]

I tried that but it still does it if the global autoDismiss is true

Bro Can eloborate your requirement so i can implement in better way Btw toast dissimisal off by DisableTimeout
After DisableTimeOut :
Its will be disable if user click on that otherwise its wont be .

[Sammaye]

Imagine a configuration like:

    ToastrModule.forRoot({
      closeButton: true,
      timeOut: 10000,
      progressBar: true,
      progressAnimation: 'increasing',
      tapToDismiss: true,
      autoDismiss: true,
      maxOpened: 7,
      positionClass: 'toast-top-right',
      preventDuplicates: true,
      enableHtml: false,
      toastComponent: CustomToastComponent,
    }),

If I now make a toast like:

      this.activeToast = this.toast.error(
        'The application will not function correctly until you are online again',
        'You are offline!',
        {
          tapToDismiss: false,
          disableTimeOut: true,
          closeButton: false,
        }
      );

It will dismiss when yo reach 7 toasts because the service itself controls that.

Also you cannot make this toast stick to top making all new toasts appear under it

[Sammaye]

It is almost like the toast itself should have an option of autoDismiss which can be set to false so it does not follow the rules of other toasts

[RAJEEV2510]

It is almost like the toast itself should have an option of autoDismiss which can be set to false so it does not follow the rules of other toasts

Basically you want Specific toast settings Okay

[RAJEEV2510]

Bro I checked it from Library side and implemented as well its work well from both side ,For This I placed Your given Configuration,Its work expected what you want,
And Its will override the object given in each toastr ,
and This is already implemented of you can configuration each toast seperately I checked in code as well from by Implementation ,So I would suggest either I will share my repository or message me on social Media Platform I will look into your problem

[RAJEEV2510]

Maintainer Pls Close this issue Its work fine no bugs in this feature yet.

[Sammaye]

Hmm, I cannot see you repo, however, I am looking at master https://github.com/scttcper/ngx-toastr/blob/master/src/lib/toastr/toastr.service.ts#L213 and it does not show the autoDismiss being overridden by individual toast config, the only place it modified this is in a private function here https://github.com/scttcper/ngx-toastr/blob/master/src/lib/toastr/toastr.service.ts#L148 and I can even see that in master the issue persists on that line since it does not check for the toast's personal settings

[RAJEEV2510]

bro i checked it by running it's overriding seriously ☺️☺️ in library even i checked

[RAJEEV2510]

/** create a clone of global config and apply individual settings */
private applyConfig(override: Partial = {}): GlobalConfig {
return { ...this.toastrConfig, ...override };
} see this it's overiding

[Sammaye]

Actually applyConfig is never assigned to this.toastrConfig when you call show() as such it is never overridden

[RAJEEV2510]

show(message?: string, title?: string, override: Partial = {}, type = '') {
return this._preBuildNotification(type, message, title, this.applyConfig(override));
}
/** show successful toast /
success(message?: string, title?: string, override: Partial = {}) {
const type = this.toastrConfig.iconClasses.success || '';
return this._preBuildNotification(type, message, title, this.applyConfig(override));
}
/* show error toast /
error(message?: string, title?: string, override: Partial = {}) {
const type = this.toastrConfig.iconClasses.error || '';
return this._preBuildNotification(type, message, title, this.applyConfig(override));
}
/* show info toast /
info(message?: string, title?: string, override: Partial = {}) {
const type = this.toastrConfig.iconClasses.info || '';
return this._preBuildNotification(type, message, title, this.applyConfig(override));
}
/* show warning toast /
warning(message?: string, title?: string, override: Partial = {}) {
const type = this.toastrConfig.iconClasses.warning || '';
return this._preBuildNotification(type, message, title, this.applyConfig(override));
}
/*

Pls read it carefully

[Sammaye]

Where does this.applyConfig set this.toastrConfig?

[RAJEEV2510]

{ ...this.toastrConfig, ...override };
Meaning of this thing is left overide by right

[Sammaye]

If I were to read the code out to you as well, from here - in repeating myself: https://github.com/scttcper/ngx-toastr/blob/master/src/lib/toastr/toastr.service.ts#L213

      if (this.toastrConfig.autoDismiss) {
        this.clear(this.toasts[0].toastId);
      }

The code within _buldNotification relies on this.toastrConfig, it does not use the incoming config param

[Sammaye]

Also that code would not work since it is wrong, you want to detect if this.toasts[0] is dismissable and if not then find one that is, tbh one solution is to allow multiple instance sof toastr in one container so you can say one set of toasts exist on top of the other under a different config, that would not only solve this since you can just mark as never having max list size and you can ensure they are always above all others.

[RAJEEV2510]

If I were to read the code out to you as well, from here - in repeating myself: https://github.com/scttcper/ngx-toastr/blob/master/src/lib/toastr/toastr.service.ts#L213

      if (this.toastrConfig.autoDismiss) {
        this.clear(this.toasts[0].toastId);
      }

The code within _buldNotification relies on this.toastrConfig, it does not use the incoming config param
I console.log Both Config its overRiding

[RAJEEV2510]

Also that code would not work since it is wrong, you want to detect if this.toasts[0] is dismissable and if not then find one that is, tbh one solution is to allow multiple instance sof toastr in one container so you can say one set of toasts exist on top of the other under a different config, that would not only solve this since you can just mark as never having max list size and you can ensure they are always above all others.

And If u place duplicate not allowed then only on toastr You will find of that instance .,
I will share My repositories soon clone it and use it .