title: Pass inputs to nested component in Angular 2
body: <p>How can the attributes be transparently translated from wrapper component to nested component?</p>
  
  <p>Considering that there is</p>
  
  <pre><code>const FIRST_PARTY_OWN_INPUTS = [...];
  const FIRST_PARTY_PASSTHROUGH_INPUTS = ['all', 'attrs', 'are', 'passed'];
  @Component({
    selector: 'first-party',
    inputs: [...FIRST_PARTY_OWN_INPUTS, ...FIRST_PARTY_PASSTHROUGH_INPUTS],
    template: `
  &lt;div&gt;
    &lt;third-party [all]="all" [attrs]="attrs" [are]="are" [passed]="passed"&gt;&lt;/third-party&gt;
    &lt;first-party-extra&gt;&lt;/first-party-extra&gt;
  &lt;/div&gt;
    `,
    directives: [ThirdParty]
  })
  export class FirstParty { ... }
  </code></pre>
  
  <p>Can the inputs be translated in batch, so they would not be enumerated in template?</p>
  
  <p>The code above is supposed to recreate the recipe for Angular 1.x directives:</p>
  
  <pre><code>app.directive('firstParty', function (thirdPartyDirective) {
    const OWN_ATTRS = [...];
    const PASSTHROUGH_ATTRS = Object.keys(thirdPartyDirective[0].scope);
  
    return {
      scope: ...,
      template: `
  &lt;div&gt;
    &lt;third-party&gt;&lt;/third-party&gt;
    &lt;first-party-extra&gt;&lt;/first-party-extra&gt;
  &lt;/div&gt;
      `,
      compile: function (element, attrs) {
        const nestedElement = element.find('third-party');
  
        for (let [normalizedAttr, attr] of Object.entries(attrs.$attr)) {
          if (PASSTHROUGH_ATTRS.includes(normalizedAttr)) {
            nestedElement.attr(attr, normalizedAttr);
          }
        }
      },
      ...
    };
  });
  </code></pre>