Click here to Skip to main content
14,335,049 members

An Angular Modal Dialog with Advanced Functionality and Easy-use Features

Rate this:
4.97 (27 votes)
Please Sign up or sign in to vote.
4.97 (27 votes)
5 Oct 2019CPOL
Presenting an advanced Angular modal dialog service and demonstrating the dialog uses and issue resolutions (updated to Angular 8).

Introduction

The Angular web client script technologies have quickly been evolving. The NgExDialog tool and sample demo application have been updated several times with the Angular versions since the code had been rewritten from the AngularJs version. The source code in Angular 8 CLI and Bootstrap 4.3 is available for downloading. If you need the source code in previous versions of Angular, please use the links in the History section by the end of the article.

The Angular NgExDialog has these features:

  • Easy to use with standardized and more simplified calling code.
  • Flexible and customizable for both basic messaging and data display purposes.
  • Dialogs can be opened to any level deep and closed or kept open individually, closed with immediate parent together, or closed for all.
  • Configurable for all options, such as draggable, animation, icon, gray-background, close-by-click-outside, cancel confirmation, etc.
  • The vertical alignment of the dialog box with custom and dynamically loaded content can be fine-tuned with the top-offset setting. 
  • Themes and styles can be set for each element, such as main dialog, header, title, icon, message body, message text, footer, and buttons.
  • Distribution with single folder containing all TypeScript, CSS, and HTML files for the dialog service.

Below are all files listed for the NgExDialog library and the DialogDemo folder. The previous file name, vertical-center.directive.ts, is changed to the alignment.directive.ts

Image 1

The major dependencies of an Angular web application all apply to the NgExDialog. Please check the package.json file in the sample project to view those dependent library tools and files. You also need the node.js (recommended version 10.16.x LTS or above) and Angular CLI (recommended version 8.1.2 or above) installed globally on the local machine. Please check the node.js and Angular CLI documents for details.

Setting up Sample Application

The downloaded sources contain two types of Visual Studio solutions/projects. Please pick up the type you would like for the setup on your local machine.

NgExDialog_AspNet5_Cli 

  1. Download and unzip the source code file to your local work space.

  2. Go to physical location of your local work space, double click the npm_install.bat and ng_build.bat files sequentially under the SM.NgExDialog.Sample/ClientApp folder.

    NOTE: The ng build command may need to be executed every time after making any change in the TypeScript/JavaScript code. Whereas the execution of npm install is just needed whenever there is any update with the node module packages.

  3. Open the solution with the Visual Studio 2019 or 2017 (2015 with Update 3 or above also works) and rebuild the solution.

  4. Click the IIS Express toolbar command (or press F5) to start the sample application.

NgExDialog_AspNetCore_Cli 

  1. Download and unzip the source code file to your local work space.

  2. Go to physical location of your local work space, double click the npm_install.bat and ng_build.bat files sequentially under the SM.NgExDialog.Sample/AppDev folder (also see the same NOTE for setting up the NgExDialog_AspNet5_Ng8_Cli project).

  3. Open the solution with the Visual Studio 2019 or 2017 (version 15.9 or above) with .NET Core 2.2 installation and rebuild the solution.

  4. Click the IIS Express toolbar command (or press F5) to start the sample application.

When you play the sample application with the Visual Studio, please check the available versions of the TypeScript for Visual Studio in the C:\Program Files (x86)\Microsoft SDKs\TypeScript folder. Both ASP.NET 5 and Core types of the sample application set the version of TypeScript for Visual Studio to 3.4 in the TypeScriptToolsVersion node of SM.NgExDialog.Sample.csproj file. If you don't have the version 3.4 installed, download the installation package from the Microsoft site.

The NgExDialog_Ng8_Scripts_AnyPlatform.zip file contains only the client script source code folders and files. If you use the systems other than the Microsoft platform, you can copy the pure Angular source code files to your own website project, perform the necessary settings using the npm and Angular CLI commands, and then run the sample application on your systems.

Dialog Access Scenarios and Syntax

The NgExDialog is built as an Angular service provider. You can see all demo cases in sections later. For using the NgExDialog in your own project, you simply need to do the following (also see the details in the source code files):

  • Copy the entire NgExDialog folder to your development component locations.
  • Import these css files to the project in the CLI style.css:

    @import "~bootstrap/dist/css/bootstrap.css"; 
    @import "app/NgExDialog/assets/css/ex-dialog.css";
  • Import the DialogModule to your app.module.ts.

  • Import the ExDialog (service) to your component ts file that calls the dialog service.

  • Inject the ExDialog service instance, such as exDialog, into the constructor of your component class.

    constructor(private exDialog: ExDialog) { }

You can use a simple line of parameters to open a message or confirmation dialog if only default settings are needed, or only the body text, title, or icon are specified.

Syntax:

[observable-object] = exDialog.openMessage("body-text", ["title"], ["icon"]);
[observable-object] = exDialog.openConfirm("body-text", ["title"], ["icon"]);

You can also use the parameter object with needed properties for a message or confirm dialog if requiring any non-default setting other than the body text, tile, or icon.

Syntax:

[observable-object] = exDialog.openMessage(parameter-object);
[observable-object] = exDialog.openConfirm(parameter-object);

When calling to open any custom or data loading dialog, it’s required to pass the name of your custom dialog component together with the parameter object having needed properties.

Syntax:

[observable-object] = exDialog.openPrime(custom-component-name, parameter-object);

For the parameter object, all properties, except the message text, are optional. The default values of the properties are set in the dialog.config.ts file. You can also view all available property names in this file and the dialog.component.ts file. A description is always there for Each property item if it isn’t self-explanatory.

Outlines of Dialog Core Services and Components

This article mainly focuses on the uses and issue resolutions of the NgExDialog. For those who are interested in the dialog internal structures and code can view these files in the NgExDialog folder of the sample application. Listed below are role and workflow outlines of major dialog services and components for your references.

  • ex-dialog.service.ts: As the wrapper of the DialogService, The ExDialog class and methods directly receive the opening dialog requests and then pass the requests to the DialogService.

  • dialog.service.ts: The DialogService class creates the instance of the DialogHostComponent into which the instance of the DialogMainComponent is added. It also acts as a switchboard of closing dialogs for different situations.

  • dialog-host.Component.ts: The DialogHostComponent class creates, caches, and removes DialogMainComponent and passed derived instance, or multiple instances, of the DialogComponent. When rendered, the component is related to the top-most DOM element of the dialog.

  • dialog-main.Component.ts: The DialogMainComponent class is an invisible container for a single dialog. It handles many options and settings of the dialog, such as background overlay, animation, draggable, close dialog by clicking outside, etc. When rendered, it’s related to the DOM element between the dialog host and individual visible dialog elements.

  • dialog.component.ts: The DialogComponent abstract class handles all dialog parameter type definitions and value translations. It also participates in the process of closing dialogs based on conditions and callbacks. The pre-defined BasicDialogComponent class with its template and any custom dialog component are all inherited from the base DialogComponent. Any such derived component for the dialog content is passed from the starting ExDialog service till to DialogMainComponent to which the real dialog content is appended.  Any component derived from the DialogComponent, when rendered, is related to the DOM elements of the real visible dialog.

Basic Use Case Examples

The NgExDialog uses the built-in BasicDialogComponent with its HTML template for simple message or confirmation dialogs.

Opening an information message dialog with required body text only:

this.exDialog.openMessage("This is called from a simple line of parameters.");

Image 2

Opening a warning message dialog with required message text only:

this.exDialog.openMessage("This is called from a simple line of parameters.", "Warning", "warning");

Image 3

Opening a plain dialog without the icon and gray background:

this.exDialog.openMessage({
    title: "No Icon, No Gray",
    //icon property needs to be here to overwrite default value. It can be "".
    icon: "none", 
    message: "This is called by passing a parameter object",
    grayBackground: false
});

Image 4

Opening a confirmation dialog with required body text only:

this.exDialog.openConfirm("Would you like to close the dialog and open another one?")
.subscribe((result) => { 
    if (result) {                
        this.exDialog.openMessage("This is another dialog."); 
    }              
});

Image 5

Opening a message dialog with the animation and draggable disabled (Note that the animation and draggable features are enabled for all dialogs by default):

this.exDialog.openMessage({
    message: "Animation and drag-move disabled.",
    animation: false,
    draggable: false
});

The dialog displays with all default title, icon, and button but there is no animation and draggable effects. You can see the result by clicking the Dialog without Animation and Dragging link on the demo page.

Opening a custom data form dialog:

this.exDialog.openPrime(ProductComponent, {
    width: '450px' 
});

In this case, the NgExDialog provides the main frame features of the dialog. All contents and page-dialog communication processes are defined in the specified ProductComponent with its template, including the action and close buttons, and all content styles. This will be more flexible for developers to design and implement the data form and its operations.

Image 6

When using the dialog box containing custom content especially dynamic loaded data list items, the dialog element height is unpredictable, which may cause the dialog box vertical alignment issues. There is conditional calculation logic in the alignment.directive.ts to handle most of the situations and show the dialog box with the ideal position (see the coding details in the file if interested). You can also fine tune the top alignment of the dialog box by specifying the topOffset pixal value in the calling parameter list. The default topOffset value is 50. Experiment with your own values for the optimal vertical alignment look.

this.exDialog.openPrime(ProductComponent, {
    width: '450px', 
    topOffset: 30
});

NOTE: you can see more examples of using the custom data form and PDF Viewer IFrame with the dialogs in these links:

Angular Data CRUD with Advanced Practices of Reactive Forms
PDF Document Display and File Downloads with Angular, AngularJS, and Web API

HTML Templates

The built-in template in the NgExDialog for message and confirmation types of dialogs usually meets the needs of most common uses. The themes and styles can even be customized at the individual element level. In case you need to modify it or add new elements into it, you can make changes in the basic-dialog.component.htmlbasic-dialog.component.css, and basic-dialog.component.ts files.

A particular HTML template with custom dialog component class should be created for any type other than the basic message or confirmation dialogs, such as the data form dialog. In this scenario, the dialog uses the core features of the NgExDialog to interact with the environment. The custom HTML template of the component is responsible for the content of the visible dialog area. Thus, any data process, communication between the HTML template and the component class, and look-and-feel of the dialog will be handled by your own code.

The relative URL of any HTML template specified for the templateUrl of the component can automatically be resolved due to setting the id property of the NodeModule in the @Component decorative. This is really a nice feature of the Angular. For example, the basic-dialog.component.html is physically deployed to the “/app/NgExDialog” folder whereas in the TypeScript file, we just need to set the templateUrl to the current relative path.

@Component({
    moduleId: module.id.toString(),
    selector: 'basic-dialog',
    templateUrl: "./basic-dialog.component.html",
    styleUrls: ["./basic-dialog.component.css"] 
})

When using the Webpack tool or CLI (with built-in Webpack) which resolves the content file paths internally, the path-resolving feature with the module.id.toString() is ignored. I still keep the code line there for backward compatibility since I frequently use the systemjs setup for achieving straightforward debugging tasks in the Visual Studio.

Closing or Keeping Open Dialogs

Like its AngularJS ancestor in a multi-level dialog tree, the Angular NgExDialog always creates a new object instance to open a child dialog and never re-use any parent element resource. By default, it firstly closes the parent dialog and then opens its child. It also provides options to keep any level of parent dialogs open on the background when a child dialog is shown. There are at least these benefits when enabling this feature:

  • Some dependent processes need co-existence of both parent and child dialogs, even for non-data-access dialogs.
  • When needed, users can see all dialogs loaded for the workflow.
  • The shuffling and flicking visual effects due to dialog transitions can be avoided.

The option can be enabled using the input parameter object properties for the dialog that will be kept open:

this.exDialog.openConfirm({
      . . .,
    keepOpenForAction: true,
    keepOpenForClose: true
});

For a confirmation type dialog, the keepOpenForAction is for keeping the dialog open when clicking the action button, such as Yes, OK, Go, or Continue, and the keepOpenForClose is for clicking the close button, such as No or Cancel. For a message type dialog with only single OK, Go, or Continue button, the keepOpenForClose is available when the closeButtonLabel is used (the default setting) or the keepOpenForAction is available when the actionButtonLabel is used. For the AngularJS version, only the closeButtonLabel and keepOpenForClose are available for any single-button dialog.

In most situations, commands of also closing immediate parent or closing all dialogs are needed from a child dialog when using the options to keep parent dialogs open.

If also closing the immediate parent from the code for a child dialog:

this.exDialog.openMessage({
     . . .,
    closeImmediateParent: true
});

If closing all dialogs:

this.exDialog.openMessage({
     . . .,
    closeAllDialogs: true
});

The existing parent dialog is always behind the newly opened child dialog. The parent dialog may not be seen at all if its size is smaller than the overlapped child dialog. Since the NgExDialog has the draggable feature (described later), the child dialog can be moved aside to view the underlying parent dialog.

Image 7

Running Tasks When Closing Dialogs

For a dialog, commands to run tasks are usually initiated from the action button. The application workflow may sometimes need to run additional tasks when closing a dialog, such as a cancel warning, further confirmation, refreshing the data on the parent page, or redirecting to other pages. Three options are available for running tasks when a dialog is about to be closed.

  1. Using custom callback function for any base screen of basic message, confirmation, or custom dialog. You can specify a callback function for the input parameter object property beforeCloseCallback:
    let thisRef: any = this;
    this.exDialog.openConfirm({
        actionButtonLabel: "Continue",
        closeButtonLabel: "Cancel",
        message: "What next step would you like to take?",
        beforeCloseCallback: function (value) {
            var rtnObs = thisRef.exDialog.openConfirm({
                message: "Do you really want to cancel it?"
            });
            return rtnObs;
        }
    });        

    With responding to the cancel confirmation, the workflow will be cancelled and all pop-up screens are closed when clicking the Yes button, or it will return to the previous screen that keeps everything as before when clicking the No button.

    Image 8

    The callback function can return either the Observable object for nested confirmation dialog box or the boolean value for any custom code logic. If you use a callback function for closing a custom dialog, returning true will close the dialog and false keep the dialog open. You can view the example of using a dialog callback function to refresh parent data sheet in my Angular Data CURD article. 

  2. Using the returned Observable result directly from a confirmation dialog. Usually we set the result to false for the cancel operation. Additional tasks can be performed in the “else” code block.
    this.exDialog.openConfirm("Would you like to close the dialog and open another one?")
    .subscribe((result) => { 
        if (result) {                
           //Test Observable result true.
           this.exDialog.openMessage("This is another dialog."); 
        }
        else {
           //Test Observable result false.
           //You can run another task here. 
           this.exDialog.openMessage("The dialog has been closed.");
        }
    });

    By default, the task running to the response of closing the dialog occurs after the dialog has been closed. Thus, this scenario is best used for a workflow that is not returned back to the previous parent dialog screen.

  3. When using any data dialog with a custom template, you can also place any code logic directly in the close button function call. This approach is pretty straightforward since the close button and its attributes are specified within the custom template. Here is the cancel() function code for the cancel warning and confirmation in the data form dialog example.

    cancel() {
        this.exDialog.openConfirm({
            title: "Cancel Warning",
            icon: "warning",
            message: "Do you really want to cancel the data editing?",
            keepOpenForAction: true,
            keepOpenForClose: true
        }).subscribe((result) => {
            if (result) {
                thisRef.exDialog.openMessage({
                    title: "Notification",
                    message: "The editing has been cancelled.",
                    closeAllDialogs: true
                });
            }
            else {
                thisRef.exDialog.openMessage({
                    title: "Notification",
                    message: "The editing will continue.",
                    closeImmediateParent: true
                });
            }
        });
    }

    The screenshot shows the result when clicking No button on the Cancel Warning dialog:

    Image 9

    Unlike using the callback function, this logic cannot automatically trigger any call on the parent page. You need to use one of the approaches between Angular component interactions to conduct dialog caller's actions in response to the dialog closing.

Draggable Dialogs

A draggable dialog allows user to watch any part of the underlying page content and hence is a user-friendly add-on. The NgExDialog is fully draggable and well adaptable to the screen resizing. The draggable option is set by default. You can turn off this feature for the entire application by changing the default value to false in the dialog-config.ts file or disable it for any individual dialog by passing the “draggable: false” in the parameter object as the example shown before.

Some behaviors associated with draggable dialogs are still worth mentioning here although issues for the Angular NgExDialog seem less than those of AngularJS version.

  1. When enabling the draggable for any dialog with a custom component containing input type elements, you need to specify additional (focus) and (blur) event attributes for each input element as in the product.component.html example:

    <input type="text" class="form-control" id="txtProductName" name="txtProductName"
    
       [(ngModel)]="model.product.ProductName" required maxlength="50" 
    
       (focus)="setDrag(true)" (blur)="setDrag(false)" />

    This is because the draggable directive in the NgExDialog doesn’t call the preventDefault() function of the mousedown event which, if called, disables the input fields on the dialog. But with HTML default setting, when trying to highlight the text in the input field with the mouse, the entire dialog will be moving causing the normal text highlight functionality to fail. Thus, a global flag is set in the dialog-cache.ts that receives boolean values from those input fields to disable and re-enable the dragging action when the mouse point is on and off any input field, respectively.

    On below screenshot, the dialog cannot be dragged and moved when the input field is getting focused so that text highlighting with the mouse can be performed:

    Image 10

  2. There is no more the issue of selected display text on the dragged dialog and underlying page that was seen in the AngularJS version, even the dialog is dragged and moved out of the window’s edges.  This is due primarily to the use of custom focus-blur directive that is placed for any input element on the open dialog. When the dialog opens, the focus is switched immediately to the element of the dialog from the underlying page or parent dialog. It is then automatically out of, or keeping, focus based on the passed value. In the example, this code line is used for the first button on the dialog.

    <button type="button" class="close" [focus-blur]="'focus_blur'" (click)="cancel()">&times;</button>

    The logic in the focus-blur.directive.ts is:

    if (this.option == "focus" || this.option == "focus_blur") {
        this.element.nativeElement.focus();
    }
    if (this.option == "blur" || this.option == "focus_blur") {
        this.element.nativeElement.blur();
    }
  3. Resizing the window will always re-center the dialog within the window if the dialog has not been dragged since it opens. This behavior is not changed comparing to the AngularJS version. For the Angular NgExDialog, if the dialog is dragged and then the window is resized, the dialog is also moved proportionally to the previous relative position. This improvement is due mainly to the new code structures and calculations for the window resize in the AlignmentDirective class. You can read the code in the alignment.directive.ts for details.

    When reducing the size of the window after dragging an open dialog to near the right bottom corner, the dialog will still be near the right bottom corner area and not be partly or entirely out of the edges.

    Image 11

Custom Styles for Built-in Template

Additional CSS classes can be specified for elements of the basic message or confirmation dialog with the build-in template. For example, if a particular dialog needs some header and footer styles other than the defaults, we can add the properties, headerAddClass and footerAddClass, to the parameter object and then creating corresponding CSS classes:

exDialog.openMessage({
    title: "Look Different",
    icon: "none",
    message: "Show header and footer in other styles.",            
    headerAddClass: 'my-dialog-header',
    footerAddClass: 'my-dialog-footer'
});

Image 12

The full list of available input parameter object properties for adding dialog element CSS classes listed in the dialog-config.ts and dialog.component.ts files. In the dialog input parameter object, some properties for setting basic dialog CSS styles have no default values. If it’s required to make all dialogs the same look-and-feel across the entire application, you may change the CSS classes to your own ones directly in the HTML templates. You can also add your own styles or edit existing styles in the ex-dialog.css, under the app/NgExDialog/assets/css/ folder if you need the different styles for the base dialog components and associated context.

Closing Dialogs with Browser Navigations

On Angular-coded pages, any browser redirection to another site will automatically close any open dialog. However, browsing back and forward on a page that has any history activity and any open dialog could keep the current modal dialog still shown over the re-visited page background. In AngularJS version, I used the $locationChangeStart event handler to close any open dialog before switching back or forth to other pages. To resolve the same issue in Angular, we can firstly use the router’s NavigatoinEnd event handler to obtain the old and new route locations. We can then call to remove any existing cached dialog components in the dialogs array when the route location changes. The best place to add this code logic is the ngOnInit() method of the AppComponent class in the app.component.ts file:

ngOnInit() {
    let pThis: any = this;
    //value[0]: old route; value[1]: new route.
    this.router.events.pipe(
        filter(value => value instanceof NavigationEnd),
        pairwise()
    ).subscribe((value: any) => {
        if (value[1].url != value[0].url) {
            //Close any open dialog.
            let dialogs: any = pThis.exDialog.getDialogArray();
            if (dialogs != undefined && dialogs.length > 0) {
                //Pass the last component of array to service.
                pThis.exDialog.clearAllDialogs(dialogs[dialogs.length - 1])
            }
        }
    });
}

The below screenshots illustrate the browser-back operations on the resolved issue.

When browsing to the Second Sample page, open a dialog on that page and then click the browser back button:

Image 13

The dialog is automatically closed and the process returns to the first main page:

Image 14

Summary

It’s my pleasure to share with the developer's communities the code of the Angular modal dialog, NgExDialog, the demo sample project, and discussions in the article. The modal dialog tool as the client-side code works on any website project if you take all files in the NgExDialog folder from the sample project although the full sample project uses the Microsoft ASP.NET 5 or ASP.NET Core structures. Audiences can see the other more advanced samples using the NgExDialog from these posts:

Angular Data CRUD with Advanced Practices of Reactive Forms
PDF Document Display and File Downloads with Angular, AngularJS, and Web API

History

  • 3/28/2017: Original post with Angular version 2.

  • 7/9/2017: Added sample code and setup instructions for the ASP.NET 5 project type.

  • 9/2/2017:

    • Added sample code for the Angular version 4.
    • Changed names "Angular 2" and "Ng2ExDialog" to "Angular" and "NgExDialog", respectively, in the article title and text.
  • 1/14/2018: Updated article and source code with the Angular 5.

  • 11/22/2018:

    • Update source code with the Angular 6 CLI.
    • Edited text in some sections and changed all screenshots of the article.
    • If needed, the source code and setup instructions for Angular 5 can be downloaded here.
  • 3/31/2019:

    • Updated source code with the Angular 7 CLI and Bootstrap 4.3.
    • The text in the first two sections is also edited accordingly.
    • The previous source code in Angular 6 and Bootstrap 3.3 can be downloaded using the link: NgExDialog_Ng6_Cli.zip
  • 10/5/2019:

    • Updated source code with Angular 8 CLI.
    • Added instructions to check the TypeScript version for the Visual Studio.
    • Added adjusting vertical alignment with topOffset value. 
    • The previous source code in Angular 7 and Bootstrap 3.4 can be downloaded using the link: NgExDialog_All_Ng7_Cli.zip.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Shenwei Liu
United States United States
Shenwei is a software developer and architect, and has been working on business applications using Microsoft and Oracle technologies since 1996. He obtained Microsoft Certified Systems Engineer (MCSE) in 1998 and Microsoft Certified Solution Developer (MCSD) in 1999. He has experience in ASP.NET, C#, Visual Basic, Windows and Web Services, Silverlight, WPF, JavaScript/AJAX, HTML, SQL Server, and Oracle.

Comments and Discussions

 
QuestionUsing ExDialog in my App - The Dialog Window is Translucent Pin
bobc027-Sep-18 11:40
memberbobc027-Sep-18 11:40 
AnswerRe: Using ExDialog in my App - The Dialog Window is Translucent Pin
bobc028-Sep-18 9:16
memberbobc028-Sep-18 9:16 
QuestionNice Article Pin
Member 1375641231-Mar-18 11:04
memberMember 1375641231-Mar-18 11:04 
QuestionModal closing when clicking outside it - needs to call same function as when clicked on close modal button Pin
Member 1372655514-Mar-18 8:42
memberMember 1372655514-Mar-18 8:42 
PraiseThanks Pin
KING_9125-Jan-18 11:42
memberKING_9125-Jan-18 11:42 
QuestionDisplaying a pdf file Pin
nicolas_lmd18-Jan-18 0:29
membernicolas_lmd18-Jan-18 0:29 
AnswerRe: Displaying a pdf file Pin
Shenwei Liu18-Jan-18 16:12
memberShenwei Liu18-Jan-18 16:12 
QuestionNot working with Angular 5 Pin
Member 1332717812-Dec-17 23:32
memberMember 1332717812-Dec-17 23:32 
AnswerRe: Not working with Angular 5 Pin
Shenwei Liu29-Dec-17 8:57
memberShenwei Liu29-Dec-17 8:57 
AnswerRe: Not working with Angular 5 Pin
Shenwei Liu14-Jan-18 12:42
memberShenwei Liu14-Jan-18 12:42 
BugRe: Not working with Angular 5 Pin
Harry C. Nystrom18-Jan-18 1:54
memberHarry C. Nystrom18-Jan-18 1:54 
GeneralRe: Not working with Angular 5 Pin
Shenwei Liu18-Jan-18 15:57
memberShenwei Liu18-Jan-18 15:57 
QuestionError Add DialogComponent to NgModule Pin
Member 32677332-Nov-17 5:13
memberMember 32677332-Nov-17 5:13 
AnswerRe: Error Add DialogComponent to NgModule Pin
Shenwei Liu30-Nov-17 10:09
memberShenwei Liu30-Nov-17 10:09 
AnswerRe: Error Add DialogComponent to NgModule Pin
Member 1332717812-Dec-17 23:24
memberMember 1332717812-Dec-17 23:24 
GeneralRe: Error Add DialogComponent to NgModule Pin
Shenwei Liu29-Dec-17 9:04
memberShenwei Liu29-Dec-17 9:04 
GeneralRe: Error Add DialogComponent to NgModule Pin
Shenwei Liu14-Jan-18 12:49
memberShenwei Liu14-Jan-18 12:49 
QuestionVS 2017 solution not working Pin
andy_johnson2226-Sep-17 6:37
memberandy_johnson2226-Sep-17 6:37 
AnswerRe: VS 2017 solution not working Pin
Shenwei Liu30-Nov-17 10:03
memberShenwei Liu30-Nov-17 10:03 
QuestionReturn data from dialog to calling function Pin
Member 44704786-Sep-17 3:29
memberMember 44704786-Sep-17 3:29 
AnswerRe: Return data from dialog to calling function Pin
Shenwei Liu14-Sep-17 16:16
memberShenwei Liu14-Sep-17 16:16 
QuestionVertical centering Pin
Member 1332717827-Jul-17 4:43
memberMember 1332717827-Jul-17 4:43 
AnswerRe: Vertical centering Pin
Shenwei Liu1-Sep-17 15:13
memberShenwei Liu1-Sep-17 15:13 
GeneralRe: Vertical centering Pin
User-10444107-Sep-17 13:02
professionalUser-10444107-Sep-17 13:02 
QuestionThe Attached Position of the Modal Pin
Bob57026-May-17 8:50
memberBob57026-May-17 8:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Article
Posted 28 Mar 2017

Stats

73.9K views
2.4K downloads
53 bookmarked