Instantly share code, notes, and snippets.

Embed
What would you like to do?
Experiment to use mixins to make composition possible for angular components
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';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment