How to create higher order components in Angular 2

Question

Higher Order Components (HOCs) are a template common to the React community. See this article if you do not know what HOC is.

Do they make sense in Angular 2? How to make HOC? Any examples?

Answer 1

I am also very interested in something similar to HOC (Recompose, as in Angular 2). Recently I tried to create an analogue for mapToProps HOC 'Recompose for Angular - mapToInputs using the Angular structured directive. I am looking for a better approach.

@Component({ selector: 'user-list', template: ` <h2>{{status}} users</h2> <div *ngFor="let item of data">{{item}}</div> ` }) export class UserList { @Input() data: Array<any>; @Input() status: string; } @Directive({selector: '[mapInputs]'}) export class MapInputs { component; @Input() set mapInputsComponent(component) { this.component = component; } @Input() set mapInputs(fn) { this.vc.clear(); let factory = this.componentFactoryResolver.resolveComponentFactory(this.component); let componetRef = this.vc.createComponent(factory); let inputs = fn(); console.log(inputs); Object.entries(inputs).forEach(([key, value]) => { componetRef.instance[key] = value; }); } constructor(private vc: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) { } } @Component({ selector: 'my-app', template: ` <div> <button (click)="doubledata()">Doubel Data</button> <div *mapInputs="filterBy.bind(null, {data:data, status:'active'}); component: component"></div> <div *mapInputs="filterBy.bind(null, {data:data, status:'passive'}); component: component"></div> <div *mapInputs="filterBy.bind(null, {data:data, status:'blocked'}); component: component"></div> </div> `, }) export class App { name: string; component = UserList; data = ['active', 'active', 'passive', 'blocked', 'blocked']; filterBy = (context) => { return { status: context.status, data: context.data.filter(el => el === context.status); }; } doubledata(){ this.data = this.data.concat(this.data); } constructor() { this.name = `Angular! v${VERSION.full}` } }