JQuery UI Dialog

What it will look like

What it will look like with parameters

What it will “look like”



First, we have to do the dirty work and include jquery and jqueryui into our project. You can link to your sources any way you like, but we will install them into our packages.json

Then we have to reference these libraries in index.html

Lets create a component to support our input/output variables

Explaination of the not-so-self-explanatory parts


Using the <ng-content> tag is called transclusion, which is a fancy name for “anything I put between the <dialog> tags in the component that uses this component, put here. This is so we can wrap the callers content in our JQueryUI dialog


In order for JQuery to get ahold of our div to turn it into a dialog, we need to get a reference to it. I chose the Angular 2 way of @ViewChild! Because our template labels the <div> with #dialogRef, we will be able to use this member variable to access the native DOM element.

Using JQuery UI Dialog

Well great, our dialog doesn’t do much other than wrap the content in a fancy div. Let’s change that.

ngAfterViewInit(), in my opinion is the best place to initialize JQuery elements because the DOM has settled at this point.

Most of this should look familiar if you have used JQueryUI dialog before- with a couple caveats. The function closures do not work well with Typscript’s “this” pointer. Therefore, I stored “this” in a “myself” variable so that I could access the class instance from within a function. Also, I had to cast JQuery’s $ as an <any> so that my code would pass compilation.


Now we’re cooking, but don’t run it just yet, we have some missing values, lets set them up in the constructor

The Show variable

Almost there, if we were to run this, nothing would happen. We need to map our input/output variables to functions in the JQueryUI Dialog. Lets use ngOnChanges

So How Do I Use This?

For the show and title variables, you just have to bind them to variables in the parent component. The buttons parameter is a little more tricky, but you just pass in an object just like you usually would to JQueryUI Dialog.


One thought on “JQuery UI Dialog

Leave a Reply

Your email address will not be published. Required fields are marked *