Using Angular 2 Components in a Non-Angular App

Using Angular 2 Components in a Non-Angular App -

  • We wanted to write some new Angular 2 components and even reuse several big components from Lucidchart, but we needed to be able to fire up individual components scattered around the application, without having one big Angular app controlling them all.
  • In this blog post, I’ll walk you through the process of setting up a few Angular 2 components in a simple non-Angular JavaScript application.
  • An Angular implementation in Typescript might look something like this:

    Each entry in the checklist is represented by a component, and the app maintains the list of items in the checklist.

  • Finally, the last line attaches the componentRef’s to the so that Angular can then perform change detection and other lifecycle events on the component.
  • Coming back to the constructor, we can get the Angular module’s injector when bootstrapping the module like so:

    Let’s make our CheckListItem component an EntryComponent, bootstrap the module, and create an instance of the DynamicNg2Loader class.

In this tutorial, we’ll make a ToDo list application as a way of demonstrating how to bootstrap Angular components into non-Angular based applications.

@ngnewsletter: Using Angular 2 Components in a Non-Angular App –

Lucidpress is a large application—hundreds of thousands of lines of handwritten JavaScript. After seeing the success Lucidchart had in modernizing its UI with Angular, we wanted to follow suit, but we didn’t have the resources to do a wholesale rewrite all at once. We wanted to write some new Angular 2 components and even reuse several big components from Lucidchart, but we needed to be able to fire up individual components scattered around the application, without having one big Angular app controlling them all.

This use case isn’t one that’s well-documented by the Angular team, but it turns out that it can be done cleanly and without a whole lot of boilerplate code for bootstrapping each component. In this blog post, I’ll walk you through the process of setting up a few Angular 2 components in a simple non-Angular JavaScript application.

(Note: Checkout this post if you are looking for ways to load a component dynamically from within Angular)

Say we have a simple to-do app that maintains a list of things to do. It lets you add items to the list and lets you mark them as done. An Angular implementation in Typescript might look something like this:

app maintains the list of items in the checklist. We can then use this in our angular app simply by adding before bootstrapping the module.

, we see the following:

class that looks like this:

is the location where our Angular 2 component will be loaded.

Let’s step through the function to see what each line does.

so that Angular can then perform change detection and other lifecycle events on the component. All of these need to happen inside Angular’s zone.

Coming back to the constructor, we can get the Angular module’s injector when bootstrapping the module like so:

Let’s make our CheckListItem component an EntryComponent, bootstrap the module, and create an instance of the DynamicNg2Loader class.

And finally, we can use the loader to load the component when required.

You can see the plunkr in action here.

Using Angular 2 Components in a Non-Angular App

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.