How to use the notification over modal popup

As per the steps mentioned in the notification example, I had set up it in my app component <simple-notifications [options]="notificationOptions" (onCreate)="onNotificationsCreate($event)" (onDestroy)="onNotificationsDestroy($event)" class="mm-alerts-popup"></simple-notifications>

Now it is showing the notification all over the places wherever it is required. Issue is I have specific page which has a form filling popup (modal) If i want to validate the data i am calling the notification service and showing the message. But as the “simple-notifications” component is at app level, it is showing below the popup/Modal. How i can achieve this? so that at this point i can show this over popup not at below of it.

[ahmed-hamdy90]

At First: I tried use solution [which suggested by @flauc -> Here ] for change z-index style, It works with me, I must override z-index of modal background overlay with values less than notification layout plus use ViewEncapsulation.None under Component like this:

Style file:

ngb-modal-backdrop.modal-backdrop {
  z-index: 9000 !important;
}

.my-modal {
  z-index: 9100 !important;
}

div.simple-notification-wrapper {
    z-index: 9999 !important;
}

Component class:

@Component({
  selector: 'app-my-modal',
  templateUrl: './my-modal.component.html',
  styleUrls: ['./my-modal.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class MyModalComponent implements OnInit {}

But This solution may be bug in case there two pop-up modal into same page (one which override it’s z-index and another with default Bootstrap Modal style), Scenario for Bug: when open First The override Modal style then Open The modal with default Style Will display Background overlay above model view as we use ViewEncapsulation.None into Component class.

Then: I tried use another solution [which suggested by @JanvanCasteren -> Here ] of put <simple-notification> tag with-in Modal view without any style override, it work with me Even this solution was settings duplicate <simple-notification> tag as the main one setting under app.Component class’s view.(There no duplicate notifications will display)

Finally: I hope this issue will be solved using Library’s Options without need to try any workaround before 2021

[JanvanCasteren]

I have <simple-notifications [options]=“notificationOptions”></simple-notifications> included in my appComponents html.

Like @deepender87 states, when using a popup dialog, the notification popups appear behind the dialog.

My solution was to simple add a second simple-notifications element inside the dialogs content section.

In my case (I use primeng dialogs):

<p-dialog  ....>
   <!-- all html between <p-dialog  ....> and </p-dialog> will be shown as dialog content -->
   <div>this is dialog content</div>
  <simple-notifications [options]="notificationOptions"></simple-notifications><!-- this notification will show render above the dialog -->
</p-dialog>