0

Toastr allows you to globally define container, where toasts are displayed in this way:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ToastrModule, ToastContainerModule } from 'ngx-toastr';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

    ToastrModule.forRoot({ positionClass: 'inline' }), // <-- this
    ToastContainerModule,                              // <-- lines
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

I want to achieve something similar, I want to place these toasts in a specific container but only within one component, so that it doesn't affect the rest of the toasts in the rest of the application. This is a pure component, no module or route.

Is something like this even possible?

TalVik99
  • 91
  • 9

1 Answers1

0

You can apply configurations while triggering a toastr. Check the code below.

this.toastr.success('Textt', 'Text2', {
  positionClass: 'top-right',
});
Vince Cyriac
  • 109
  • 1
  • 10
  • Yes, I am aware of this but I want to place these toasts in a specific container, this code snippet will place them above the entire page content. Added necessary clarification to original question. – TalVik99 Jun 02 '22 at 08:48
  • I am not clear about your requirement. You need to place the toaster at a specific position in the DOM, Is that so ? – Vince Cyriac Jun 02 '22 at 08:58
  • Scenario: I have a pure component and a div.container in it's template. I want to place the toasts launched in this component in this container. In the rest of the application, the toasts are to be displayed in a standard way. – TalVik99 Jun 02 '22 at 09:13