Angular 2 with vanilla Javascript - Pass data into input from HTML

I'm trying to write a component using Angular 2 with vanilla Javascript, I want to use this component on a regular HTML page, and I want to be able to pass data into this component to customize it.

This is what I have so far:

index.html

<!DOCTYPE html>

<html>

    <head>
        <meta charset="UTF-8">    
    </head>

    <body>

        <!-- I'm using the component here -->
        <process-code id="processId" name="processName"></process-code>

        <script src="node_modules/core-js/client/shim.min.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/reflect-metadata/Reflect.js"></script>
        <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
        <script src="node_modules/@angular/core/core.umd.js"></script>
        <script src="node_modules/@angular/common/common.umd.js"></script>
        <script src="node_modules/@angular/compiler/compiler.umd.js"></script>
        <script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
        <script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>

        <!-- I'm including the component here -->
        <script src="process-code.js"></script>

    </body>

</html>

process-code.js

"use strict";

(function(){

    var ProcessCode = ng.core.Component({

        selector:'process-code',
        templateUrl: 'process-code.html',
        inputs: ['id', 'name']

    }).Class({

        constructor: function(){
            this.processCode = null;
            this.id = null;
            this.name = null;
        }

    })

    document.addEventListener('DOMContentLoaded', function() {
        ng.platformBrowserDynamic.bootstrap(ProcessCode);
    });

})();

process-code.html

<label>Process</label>
<input [id]="id" [name]="name" [(ngModel)]="codigoProcesso">

This is how the component is being rendered:

<process-code id="processId" name="processName"><label>Process</label>
    <input id="null" name="null" class="ng-untouched ng-pristine ng-valid">
</process-code>

I was expecting the id and name attributes of the input to contain the values specified on the index.html page, but apparently they're not being initialized.

I would like to know what I'm missing.

Angular 2 with vanilla Javascript - Pass data into input from HTML

1 Answers