Pass inputs to nested component in Angular 2

Question

How can the attributes be transparently translated from wrapper component to nested component?

Considering that there is

const FIRST_PARTY_OWN_INPUTS = [         


        

Answer 1

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: `

  {{all}} , {{attrs}} ,  {{are}} ,  {{passed}}

  `
})
export class ThirdParty {
}

@Component({
  selector: 'first-party',
  inputs: [...FIRST_PARTY_OWN_INPUTS, ...FIRST_PARTY_PASSTHROUGH_INPUTS],
  template: `

  

    {{not}} , {{passthrough}}
  
  
  

  `,
  directives: [ThirdParty]
})
export class FirstParty {
}

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    

      
Hello {{name}}
      
      
    
  `,
  directives: [FirstParty]
})
export class App {
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }
}

Hope it helps :)