+
+ Angular2 Component 01
+
+
+```
+
+## Custom component controller
+
+This field should contain JavaScript code for Angular 2 component class.
+
+_Note: If you are using TypeScript then you should be putting transpiled JavaScript code here,
+you can try official [TypeScript playground](http://www.typescriptlang.org/play/)
+to see how TS code gets transpiled into JS._
+
+### JavaScript code
+
+```js
+var SampleClass1 = (function () {
+ function SampleClass1() {
+ this.name = 'Denys';
+ console.log('ng2_component_01 ctor');
+ }
+ SampleClass1.prototype.ngOnInit = function () {
+ console.log('OnInit called');
+ };
+ return SampleClass1;
+}());
+```
+
+### TypeScript code
+
+The TypeScript version of the code above is:
+
+```ts
+import { OnInit } from '@angular/core';
+
+class Component1 implements OnInit {
+
+ constructor() {
+ console.log('ctor called');
+ }
+
+ ngOnInit() {
+ console.log('OnInit called');
+ }
+
+}
+```
+
+
+In order to map **form runtime template** with the corresponding component class
+you will need registering both parts with `adf.registerComponent` api:
+
+```js
+if (adf) {
+ adf.registerComponent('ng2_component_01', SampleClass1);
+}
+```
+
+### Final result
+
+```js
+var SampleClass1 = (function () {
+ function SampleClass1() {
+ this.name = 'Denys';
+ console.log('ng2_component_01 ctor');
+ }
+ SampleClass1.prototype.ngOnInit = function () {
+ console.log('OnInit called');
+ };
+ return SampleClass1;
+}());
+
+if (adf) {
+ adf.registerComponent('ng2_component_01', SampleClass1);
+}
+```
+
+## Runtime result
+
+When rendered on the form this stencil item should look like the following:
+
+```html
+Angular2 Component
+Created by: Denys
+```
+
+ADF Form component will automatically assemble and compile a valid Angular 2 component on the fly.
\ No newline at end of file