From 9c575729474d42c9bc17f1db9f04fd47008cfafc Mon Sep 17 00:00:00 2001
From: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com>
Date: Thu, 24 Oct 2024 09:50:39 +0400
Subject: [PATCH] Popup: rewrite Show and Hide the Popup (#6737)
---
...pService.md => 03 Using DxPopupService.md} | 39 +++++++++-
.../05 User Interaction.md | 72 ++++++++++++++++++-
2 files changed, 108 insertions(+), 3 deletions(-)
rename concepts/05 UI Components/Popup/10 Show and Hide the Popup/{15 Using DxPopupService.md => 03 Using DxPopupService.md} (66%)
diff --git a/concepts/05 UI Components/Popup/10 Show and Hide the Popup/15 Using DxPopupService.md b/concepts/05 UI Components/Popup/10 Show and Hide the Popup/03 Using DxPopupService.md
similarity index 66%
rename from concepts/05 UI Components/Popup/10 Show and Hide the Popup/15 Using DxPopupService.md
rename to concepts/05 UI Components/Popup/10 Show and Hide the Popup/03 Using DxPopupService.md
index f9f6b7065a..52ac8d3b6b 100644
--- a/concepts/05 UI Components/Popup/10 Show and Hide the Popup/15 Using DxPopupService.md
+++ b/concepts/05 UI Components/Popup/10 Show and Hide the Popup/03 Using DxPopupService.md
@@ -1,6 +1,6 @@
DevExtreme Popup includes a `DxPopupService` that allows you to initiate popups directly from .ts files without template code. The use of [services](https://angular.dev/guide/di/creating-injectable-service) that display popups is a common practice in Angular libraries.
-`DxPopupService` is imported from `'devextreme-angular/ui/popup'` and functions as a typical Angular service. The service has one method, `open` that takes two arguments:
+`DxPopupService` is imported from `'devextreme-angular/ui/popup'` and functions as a typical Angular service. To show a Popup with `DxPopupService`, call the `open` method. The method takes two arguments:
1. The Angular component class to be used as the content of the popup.
2. The popup configuration, which includes [properties](/api-reference/10%20UI%20Components/dxPopup/1%20Configuration '/Documentation/ApiReference/UI_Components/dxPopup/Configuration/') of the Popup component.
@@ -74,4 +74,41 @@ The `open` method returns a `DxPopupServiceComponent` object. This type extends
---
+You can access the Popup instance through `DxPopupServiceComponent`. Call the [hide()](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/hide().md '/Documentation/ApiReference/UI_Components/dxPopup/Methods/#hide') method to close the Popup programmatically:
+
+---
+##### Angular
+
+
+ import { DxPopupService, DxPopupServiceComponent } from 'devextreme-angular/ui/popup';
+ // ...
+ export class AppComponent {
+ employees: Employee[];
+ popupRef!: DxPopupServiceComponent;
+
+ constructor(
+ employeeService: EmployeeService,
+ private popupService: DxPopupService
+ ) {
+ this.employees = employeeService.getEmployees();
+ }
+
+ showInfo(employee: Employee) {
+ this.popupRef = this.popupService.open(EmployeeInfoComponent, {
+ showTitle: true,
+ title: 'Information',
+ container: 'html',
+ width: 300
+ });
+
+ this.popupRef.contentRef.instance.currentEmployee = employee;
+ }
+
+ closePopup() {
+ this.popupRef.instance.hide();
+ }
+ }
+
+---
+
[tags] angular
\ No newline at end of file
diff --git a/concepts/05 UI Components/Popup/10 Show and Hide the Popup/05 User Interaction.md b/concepts/05 UI Components/Popup/10 Show and Hide the Popup/05 User Interaction.md
index ad9935bf91..352a8a1f07 100644
--- a/concepts/05 UI Components/Popup/10 Show and Hide the Popup/05 User Interaction.md
+++ b/concepts/05 UI Components/Popup/10 Show and Hide the Popup/05 User Interaction.md
@@ -1,4 +1,66 @@
-The Popup can also be hidden when a user clicks outside it. To control this behavior of the Popup, use the [hideOnOutsideClick](/api-reference/10%20UI%20Components/dxOverlay/1%20Configuration/hideOnOutsideClick.md '/Documentation/ApiReference/UI_Components/dxPopup/Configuration/#hideOnOutsideClick') property.
+Enable the [showCloseButton](/Documentation/ApiReference/UI_Components/dxPopup/Configuration/#showCloseButton) property to allow a user to hide the Popup component by clicking the **Close** button.
+
+---
+##### jQuery
+
+
+ $(function() {
+ $("#popupContainer").dxPopup({
+ showTitle: true,
+ showCloseButton: true
+ });
+ });
+
+##### Angular
+
+
+
+
+
+##### Vue
+
+
+
+
+
+
+
+##### React
+
+ import React from 'react';
+ import 'devextreme/dist/css/dx.light.css';
+
+ import { Popup } from 'devextreme-react/popup';
+
+ class App extends React.Component {
+ return (
+
+ );
+ }
+
+ export default App;
+
+---
+
+The Popup can also be hidden when a user clicks outside of it. To control this Popup behavior, use the [hideOnOutsideClick](/api-reference/10%20UI%20Components/dxOverlay/1%20Configuration/hideOnOutsideClick.md '/Documentation/ApiReference/UI_Components/dxPopup/Configuration/#hideOnOutsideClick') property.
---
##### jQuery
@@ -99,4 +161,10 @@ The Popup can also be hidden when a user clicks outside it. To control this beha
export default App;
----
\ No newline at end of file
+---
+
+You can also implement a custom **Close** button inside the Popup. Refer to the following demo for more information:
+
+#include btn-open-demo with {
+ href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Popup/Overview/"
+}
\ No newline at end of file