How to custom css z-index (more 1000) of ngx-material-timepicker on a Material Dialog (MatDialog)?

Question

My ngx-timepicker-field is in MatDialog. When my timepicker is display, he's behind the MatDialog modal popup.

constructor(public dialog: MatDialog) { }

const dialogRef = this.dialog.open(PopupComponent, {
    data: {
        ...
    },
    position: {
        top: '50px'
    }
});

PopupComponent:

@ViewChild('sendAlertHour', {static: false} ) sendAlertHour:  NgxTimepickerFieldComponent;

<div>
    <ngx-timepicker-field #sendAlertHour></ngx-timepicker-field>
</div>

Answer 1

In the global stylesheet (styles.scss) add the following:

.timepicker-overlay {
  z-index: 1100 !important;
}

.timepicker-backdrop-overlay {
  z-index: 1100 !important;
}

This will show timepicker above the material dialog. Solution found here.

Answer 2

I found a workaround. I change z-index of MatDialog

I add this in global CSS file in my Angular app:

.cdk-overlay-container {
    z-index: 500 !important;
}