projects/i-components/src/lib/components/popup/popup-host/popup-host.component.ts
Container for every displayed popup
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | wm-popup-host |
| styleUrls | ./popup-host.component.scss |
| templateUrl | ./popup-host.component.html |
Properties |
Methods |
constructor(cd: ChangeDetectorRef)
|
||||||
|
Parameters :
|
| isCenter | ||||||
isCenter(p: PopupData)
|
||||||
|
If there is no position defined the popup is centered on the screen
Parameters :
Returns :
boolean
{boolean} |
| update | ||||||
update(popups: PopupData[])
|
||||||
|
Updates the current displayed popup content
Parameters :
Returns :
void
|
| popups |
Type : PopupData[]
|
|
The collection of popup items |
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
OnInit,
} from '@angular/core';
import { PopupData } from '../services/popup.service';
/**
* Container for every displayed popup
*
* @export
* @class PopupHostComponent
*/
@Component({
selector: 'wm-popup-host',
templateUrl: './popup-host.component.html',
styleUrls: ['./popup-host.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PopupHostComponent {
/**
* The collection of popup items
*
* @type {PopupData[]}
* @memberof PopupHostComponent
*/
popups: PopupData[];
constructor(private readonly cd: ChangeDetectorRef) {}
/**
* Updates the current displayed popup content
*
* @param {PopupData[]} popups
* @memberof PopupHostComponent
*/
update(popups: PopupData[]) {
this.popups = popups;
this.cd.detectChanges();
}
/**
* If there is no position defined the popup
* is centered on the screen
*
* @param {PopupData} p
* @return {*} {boolean}
* @memberof PopupHostComponent
*/
isCenter(p: PopupData): boolean {
return (
p.overlay &&
p.rect.left == null &&
p.rect.right == null &&
p.rect.top == null &&
p.rect.bottom == null
);
}
}
<ng-container *ngFor="let p of popups">
<div
*ngIf="!p.overlay"
class="l-popup"
[style.top.px]="p.rect.top"
[style.left.px]="p.rect.left"
[style.bottom.px]="p.rect.bottom"
[style.right.px]="p.rect.right"
[style.width.px]="p.rect.width"
[style.height.px]="p.rect.height"
[style.z-index]="p.rect.zIndex"
>
<ng-container [ngTemplateOutlet]="p.tr"></ng-container>
</div>
<div class="l-overlay" *ngIf="p.overlay">
<div
class="l-popup"
[style.top.px]="p.rect.top"
[style.left.px]="p.rect.left"
[style.bottom.px]="p.rect.bottom"
[style.right.px]="p.rect.right"
[style.width.px]="p.rect.width"
[style.height.px]="p.rect.height"
[style.z-index]="p.rect.zIndex"
[class.l-popup-center]="isCenter(p)"
>
<ng-container [ngTemplateOutlet]="p.tr"></ng-container>
</div>
</div>
</ng-container>
./popup-host.component.scss
@import '../../../scss/variables';
.l-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #00000020;
pointer-events: all;
}
.l-popup {
position: fixed;
pointer-events: initial;
// The igx-overlay have z-index of 10005,
// in order to position anything above this
// it is neccesary to set a number even higher
// Bug #479992
z-index: $z-index-above-child-windows;
}
.l-popup-center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}