Angular: How to have @Input setters called in certain order?

Question

I'm creating a component. Since I like the Apache Wicket way of doing things, I am trying to emulate the IModel way of passing data. For that, to the child component I pass a model and callbacks which can pull out the relevant values, instead of calling a function to get the data upfront.

The problem is, that handling of the newly set model uses the callbacks. So if the model setter is called before callbacks are set, Angular crashes.
Workaround: postpone the actions that need the callback to ngAfterViewInit() or such.

In short:

• How can I control the order in which the @Inputs are set?
• Can I rely on the order in the source code?

Example: (Changing the order here seems to do the job)

@Input()
valueCallback: (item: any) => string
    = app => { throw new Error("valueCallback not yet defined."); };

@Input()
labelCallback: (item: ItemType) => string;

Template using that child component: (changing the order here doesn't change the order)

            <wu-checkboxes [groupName]="'includedApps'"
                           [options]="availableApps"
                           [valueCallback]="appsValueCallback"
                           [labelCallback]="appsLabelCallback"
            >

As I mention above, Angular2 seems to follow the order of the @Input class members and sets/calls them in that order. The question is, is that de-facto or de-jure? I don't want to rely on features that work just because it's currently coded that way. I don't know much about JavaScript reflection, so I can't tell whether this is going to work everywhere.

Answer 1

You can use ngOnChanges() which is called every time an @Input() is updated by change detection. You can check within ngOnChanges whether all input values are already available and then execute your code. You need to take care yourself though, that subsequent updates don't trigger the function call again (in case this is not desired).

update

The order of bindings (value bindings and event bindings) is undefined in Angular2 and therefore you can't rely on a specific order.