Check out our new training course on AngularJS for Flex Developers

Use an External Component Template -- Build a Color Picker in Angular 2 - Part 1

This series of blog posts will document documents a quick little prototype I put together for a client. They wanted to be able to click on an image and get information about the color at the selected spot. It makes use of the HTML5 Canvas tag and is the most "Flash-like" thing I've done with HTML.

This first in the series will show you how to use an external template to an Angular 2 Component and how to access HTML Elements within that template.

Setup the App

The first step is to import all the Angular 2 libraries:


<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
<script src="https://unpkg.com/rxjs@5.0.0-beta.12/bundles/Rx.js"></script>
<script src="https://unpkg.com/@angular/core/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/common/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/compiler/bundles/compiler.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>

Angular 2 is split into a lot of individual libraries instead of one big one like AngularJS 1.x branch. Next create the component:


(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'colorpicker-app',
})
.Class({
constructor: function() {
}
});
})(window.app || (window.app = {}));

This is a typical Angular component. The name is colorpicker-app. We'll put a lot of code in the constructor later in this article. A template is not specified, but is required. We'll create that in the next section.

Next create the Angular module:


(function(app) {
app.AppModule =
ng.core.NgModule({
imports: [ ng.platformBrowser.BrowserModule ],
declarations: [ app.AppComponent ],
bootstrap: [ app.AppComponent ]
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));

The module declares our custom AppComponent and also bootstraps it. Finally, boot strap the main module:


(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(app.AppModule);
});
})(window.app || (window.app = {}));

In the HTML body, use the colorpicker-app directive to load the component:


<colorpicker-app>Loading...</colorpicker-app>

Run the code as is:

Not too impressive, we get an error because of the missing template. There are two ways we could add a template.

Create an in-line template

It is easy to create an in-line template. Just add the template property to the colorpicker-app component definition:


ng.core.Component({
selector: 'colorpicker-app',
template : 'something'
})

Rerun the app:

I hate dealing with in-line templates because as the HTML gets wordy they are complicated to maintain and change.

Create the external template

We can create an external template using the templateUrl property:


ng.core.Component({
selector: 'colorpicker-app',
templateUrl : '02canvas.html'
})

The templateUrl property is put on the colorpicker-app component and replaces the template property we used in the last section. The templateUrl specifies the URL location of a template, in this case I refer to a template in the same directory, canvas.html:


Something in external template

The template code is just some text. Run the code:

When building AngularJS 1 applications, the templateUrl sometimes caused a problem with relative URLs after you ran the code through a build script with minimizers. This was because the location of the final minimized code was not always the location of the original code; and the browser wouldn't find the template. The same problem exists in Angular 2 applications. It can be solved by using a path relative to the root directory of the web server; but for now I kept it simple.

What's Next

I'm going to stop this article here. The next article will go into details on how create and access the canvas inside Angular 2.

Sign up for DotComIt's Monthly Technical Newsletter

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.