Higher Order Component enabled by Ivy

Higher Order Component - HOC

A higher-order component (HOC) is an advanced technique for reusing component logic. Concretely, a higher-order component is a function that takes a component and returns a new component.

Angular HOC

Below is sample HOC withTheme and obviously the code received the component, insert the theme data and return decorated component. Annotated or attached the HOC to the class component is called meta-programming using typescript decorator.

Meta-programming is a technique by which you can modify the code dynamically at runtime.

And below is the HOC usage

Be creative

Ivy is enabler, it enabled HOC and Meta-programming. Be creative, there's so many use-cases can be cater by HOC.

Here is an example of enabling CSS-in-JS using HOC withStyles

And here is some ideas:

withAuth

return auth data if user have been authenticated

withRouter

return a router data

withProvider

return provider reference

Code repository

Check the codes here https://github.com/abumuawiyah/ng-ivy