ngx-toastr not working in fullscreen mode(requestFullscreen())

Question

i am using requestFullscreen() MDN Reference to view my component in full screen. i have a button in this component which on clicking displays a toast message(using ngx-toastr) everything is working fine in normal mode but in full screen mode this toastr is going behind the container(which is currently displayed as an overlay using requestFullscreen() ). I tried adding provide: OverlayContainer, useClass: FullscreenOverlayContainer as a provider in app.module and this is allowing me to show toaster messages from @angular/material/snack-bar but there is no change in the toastr messages from ngx-toast.

import { ToastrService } from 'ngx-toastr';
import { MatSnackBar } from '@angular/material/snack-bar';
...
...

constructor(
private toastService: ToastrService,
private snackBar: MatSnackBar,
){}
...
...

inside a button click function

this.toastService.warning('Saved changes cannot be edited.');  
      this.snackBar.open('Snack bar opened', 'OK', {
        duration: 5000
      });

here the first toastr is not being displayed where as the second one is being displayed

Answer 1

we can achieve this by displaying our toastr in a custom component ngx-toastr read.me

app.module

import { ToastContainerDirective, ToastrModule } from 'ngx-toastr';
.
.
.
@NgModule({
imports: [
        ToastrModule.forRoot(),
        ToastContainerDirective
    ],
)}

in html template add toastContainer

<div fullscreen>
 <div toastContainer aria-live="polite"></div>
</div>

in ts component file

constructor(private toastService: ToastrService){}

@ViewChild(ToastContainerDirective, { static: true })
  toastContainer: ToastContainerDirective;

ngOnInit(): void {

    this.toastService.overlayContainer = this.toastContainer

this are the changes which allowed me to use ngx-toastr in fullscreen mode. what I did here is basically displayed the toastr inside a div which is a child of the div with fullscreen functionality