Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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.

like image 760
Ondra Žižka Avatar asked Feb 21 '17 04:02

Ondra Žižka


People also ask

Why Angular input setter is only being fired once?

If you click on the “set to Parent” button multiple times, the child component setter won't be triggered from 2nd time onward. Thus it looks like the Input setter is only being fired once if the value of the setter hasn't been changed.

When and where @input Decoratator can be used in a component?

@Input Decorator. @Input is a decorator to mark a property as an input. @Input is used to define an input property, to achieve component property binding. @Inoput decorator is used to pass data (property binding) from parent to child component.

What is the @input decorator for?

The @Input() decorator in a child component or directive signifies that the property can receive its value from its parent component.


1 Answers

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.

like image 123
Günter Zöchbauer Avatar answered Dec 30 '22 00:12

Günter Zöchbauer