Angular Context: Easy Data-Binding for Nested Component Trees and the Router Outlet

Yes, it does.

One-way Data-binding with Angular Context #4The AppComponent is adjusted to have 0 as initial progress and now has an interval increasing the progress value by 10 every second.

You can see the result below:One-way Data-binding with Angular Context #4 ResultTwo-way Data-binding with Angular ContextOne-way binding, although helpful, is only half of the picture.

We are building interactive apps and need to capture user input somehow.

In Angular, the recommended way of doing that is via reactive forms, but we will get to that.

For now, let us try something else with rating component from NgxBootstrap to see the worst case.

Two-way Data-binding with Angular Context #1In this scenario, just like the first example, data is bound to the child using the ContextConsumerDirective.

The tricky part is, in order to make this work, one needs to know and mimic the internals of the rating component.

Frankly, that would be a terrible thing to do, not because it is more labor, but rather due to the fact that any future change on the rating component has potential to break the bindings.

Therefore, despite being available, avoid this by all means.

Take a closer look at onRating though.

Instead of a method, a public property is called upon.

The reason is the lexical scope.

I have no intention to explain closures in this post.

However, it is worth mentioning that, event handlers on parents should be arrow functions, and not regular functions or methods.

Otherwise, this will not represent the parent component instance and it will be confusing.

Two-way Data-binding with Angular Context #1 ResultWe can do better.

Instead of consumer directive, ContextConsumerComponent can be used to retrieve the context and use it on the template.

Two-way Data-binding with Angular Context #2You must have noticed: We could not do a two way binding directly with the ngModel directive.

Instead, we established a one-way binding with it and are invoking the provided arrow function whenever model value changes.

This solution, despite giving the same result and being less complicated than the last one, is still not what we wish to obtain.

Next, we shall remove redundant properties from TwoWayComponent.

Two-way Data-binding with Angular Context #3Once again, the intermediary component is free from properties and methods only good to be bound to the child component.

We are getting there, yet there is one more thing to do: Reactive form implementation.

Two-way Data-binding with Angular Context #4No extra properties, no event callbacks, no ControlValueAccessor… This is as clean as it gets.

The NgIf directive is necessary though, because the control value is imperative for FormControlDirective to function properly.

Please keep in mind, currently the library cannot guarantee the order of properties to sync or be disposed and the initial value can be undefined.

You can find the demo application below.

ngx-context – StackBlitzStarter project for Angular apps that exports to the Angular CLIstackblitz.

comConclusionAngular Context is not a silver bullet and I am not suggesting an extensive adoption.

However, it brings an alternative approach to a common problem and can prove handy on occasion.

It is quite new and requires some fine tuning.

Yet, it also is well tested and production ready.

Give it a try and let us know how we can improve it.

Any feedback will be most welcome.

Thanks ????Come, say hello to us at Twitter.

We are a group of Angular lovers from Turkey, organizing meetups, publishing articles, and contributing to open-source projects around Angular.

 — NG TurkeyFollow NGTurkey on Twitter: @ngturkiye.. More details

Leave a Reply