turoni turoni - 4 months ago 130
TypeScript Question

ng.IComponentOptions list of bindings

I'm using the ng.IComponentOptions to create my component class which hold my controller and view template like this:

export class LCAConfiguratiePersonenDetailComponent implements ng.IComponentOptions {
public templateUrl: string;
public controller: any;
public bindings: any;

public static IID: string = 'lcaConfiguratiePersonenDetail';

constructor() {
this.templateUrl = require('./LCAConfiguratiePersonenDetail.template.html');
this.controller = LCAConfiguratiePersonenDetailComponentController;
this.bindings = {
id: '<'

My only problem is that I don't really know what bindings I can setup and what exactly they do. I'm mostly following on previous examples and trying what works.

Does anyone have a good explanation for all different kinds of bindings or where I can find them?

I'm sure they are out there but I can't seem to use the right search terms to come upon a page that answers my question.


Because typescript transpiles to AngularJS code an explanation can be found when looking at the AngularJS 1.5 component.

Inputs should be using < and @ bindings. The < symbol denotes one-way bindings which are available since 1.5. The difference to = is that the bound properties in the component scope are not watched, which means if you assign a new value to the property in the component scope, it will not update the parent scope. Note however, that both parent and component scope reference the same object, so if you are changing object properties or array elements in the component, the parent will still reflect that change. The general rule should therefore be to never change an object or array property in the component scope. @ bindings can be used when the input is a string, especially when the value of the binding doesn't change.

bindings: {
    hero: '<',
    comment: '@'

Outputs are realized with & bindings, which function as callbacks to component events.

bindings: {
    onDelete: '&',
    onUpdate: '&'