# Popup Service

Popup service allows for deep integration of XenaDS Modals in Angular.

<xwc-popup-example></xwc-popup-example>

```javascript
@Component({
    template: `<div class="grid gap-2">
                <span>This text is inside of a popup. <xena-icon name="far-hand-peace"></xena-icon></span>
                <div class="text-right">
                    <xena-button (click)="close()">Close</xena-button>
                <div>
            </div>`
})
export class PopupDialogExampleComponent {
    constructor(@Inject(POPUP) private popup: IPopup) { }

    close() {
        this.popup.close();
    }
}

@Component({
    template: '<button (click)="showPopup()">Show</button>'
})
export class PopupExampleComponent {
    constructor(private popupService: PopupService) { }

    showPopup() {
        this.popupService.open(PopupDialogExampleComponent, 'Example popup');
    }
}
```