Experiment to use mixins to make composition possible for angular components

angular-component-composition-with-mixin.ts

import {Component} from '@angular/core';

export function sayHi() {
  return 'Hi';
}

export function echo(msg) {
  return 'Echo:' + msg;
}

export function logComponent(state) {
  console.log('the last parameter is the class instance itself', state);
}

export function thatCaller() {
  console.log('thatCaller', this.foo);
}

export function composeClass(...fns) {
  return class {
    constructor() {
     const that = this;
     fns.forEach(fn => {
      that[fn.name] = fn.bind(that);
    });
    }
  };
}

@Component({
  selector: 'app-root',
  template: `
    <p>
      {{sayHi()}}
    </p>
    <p>
      {{echo('blubb')}}
    </p>
    <p>
      {{sayHello()}}
    </p>
    <p>
      {{thatCaller()}}
    </p>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent extends composeClass(echo, sayHi, logComponent, thatCaller) {
  foo = 'bar';
  constructor() {
    super();
  }
  sayHello() {
    return 'Hello';
  }
}