javascript - Angular2 Class not exposing functions -

i have model:

(function(app) {   app.productline =     ng.core.component({       selector: 'product-line',       templateurl: 'templates/sales-product.html',     })     .class({       constructor: function() {            this.products = [new app.product('101010101010101', '1', '19.99')];       },        addline: function() {           this.products.push(new app.product('101010101010101', '1', '19.99'));       }     });  })(window.app || (window.app = {}));  (function(app) {     app.product = function (upc, quantity, price) {         this.upc = upc;         this.quantity = quantity;         this.price = price;         return this;     }    })(window.app || (window.app = {})); 

however, can't figure out how expose addline() can call elsewhere.

logging productline shows constructor:

console.log(app.productline); function app.productline<.constructor() 

and calling app.productline.addline() gives typeerror: app.productline.addline not function.

edit:

i found adding addline function app.productline directly work. of course, scope of this changed, there needs reference constructor's results in more obvious location.

(function(app) {   app.productline =     ng.core.component({       selector: 'product-line',       templateurl: 'templates/sales-product.html',     })     .class({         constructor: function () {             this.products = [                 { upc: '',                    quantity: '',                    price: ''                  }             ];              app.productline.products = this.products;         }     });    app.productline.add = function (upc, quantity, price) {         app.productline.products.push({             upc: upc,             quantity: quantity,             price: price         });   }  })(window.app || (window.app = {})); 

you can run app.productline.add(123,456,789); , model updated.

the view, however, not updated immediately. believe necessary trigger update somehow, 2-way data binding, if use ui update model of updates appear.

if want expose shared function multiple components can use, suggest implementing service , registering application-level injector.

demo plnkr

product class , productservice

var product = ng.core.class({   constructor: function (upc, quantity, price) {     this.upc = upc;     this.quantity = quantity;     this.price = price;   }  }); var productservice = ng.core.class({   constructor: function() {      this.products = [new product('101010101010101', '1', '19.99')];   },    addline: function () {        this.products.push(new product('101010101010101', '1', '19.99'));   } }); 

registering productservice application-level injector

(function(app) {   document.addeventlistener('domcontentloaded', function() {     ng.platform.browser.bootstrap(app.appcomponent, [productservice]);   }); })(window.app || (window.app = {})); 

injecting productservice in component constructor , calling addline

(function(app) {    app.appcomponent =       ng.core.component({           selector: 'app',           directives: [app.productline],           template: '<h1>anguar 2</h1> <button (click)="addline()">add line</button> <ul><li *ngfor="#product of service.products"><product-line [product]="product"></product-line></li></ul>'       })      .class({          constructor: [productservice, function (service) {             this.service = service;          }],          addline: function () {              this.service.addline();          }      });  })(window.app || (window.app = {})); 

productline directive product input binding

this directive used parent component.

(function(app) {     app.productline =       ng.core.component({           selector: 'product-line',           inputs: ['product'],           template: 'upc:{{product.upc}}<br> price:{{product.price}}<br>qty:{{product.quantity}}',       })       .class({           constructor: function () {           }       });       })(window.app || (window.app = {})); 

productservice singleton. component can inject productservice , call addline() , component binds products automatically updated part of default change detection strategy.