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
Top comments (0)