I’m not sure if I got it right but here is my implementation ( PLUNKER )
const FIRST_PARTY_OWN_INPUTS = ['not', 'passthrough'];
const FIRST_PARTY_PASSTHROUGH_INPUTS = ['all', 'attrs', 'are', 'passed'];
const generateAttributes(arr) {
return arr.map(att => '[' + att + '] = "' + att + '"').join(' ');
}
//-------------------------------------------------------//////////////////
import {Component} from '@angular/core'
@Component({
selector: 'third-party',
inputs: [...FIRST_PARTY_PASSTHROUGH_INPUTS],
template: `
<div>
{{all}} , {{attrs}} , {{are}} , {{passed}}
</div>
`
})
export class ThirdParty {
}
@Component({
selector: 'first-party',
inputs: [...FIRST_PARTY_OWN_INPUTS, ...FIRST_PARTY_PASSTHROUGH_INPUTS],
template: `
<div>
<div>
{{not}} , {{passthrough}}
</div>
<third-party ${generateAttributes(FIRST_PARTY_PASSTHROUGH_INPUTS)}></third-party>
<first-party-extra></first-party-extra>
</div>
`,
directives: [ThirdParty]
})
export class FirstParty {
}
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<h2>Hello {{name}}</h2>
<first-party [not]="'not'" [passthrough]="'passthrough'"
[all]="'all'" [attrs]="'attrs'" [are]="'are'" [passed]="'passed'">
</first-party>
</div>
`,
directives: [FirstParty]
})
export class App {
constructor() {
this.name="Angular2 (Release Candidate!)"
}
}
Hope it helps :)