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

You can accomplish this by using @Input() on your child components.

http://plnkr.co/edit/9iyEsnyEPZ4hBmf2E0ri?p=preview

Parent Component:

import {Component} from '@angular/core';
import {ChildComponent} from './child.component';

@Component({
  selector: 'my-parent',
  directives: [ChildComponent],
  template: `
    

      
I am the parent.
      My name is {{firstName}} {{lastName}}.

        

        

    
  `
})
export class ParentComponent {
  public firstName:string;
  public lastName: string;
  constructor() {
    this.firstName = 'Bob';
    this.lastName = 'Smith';
  }
}

Child Component:

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

@Component({
  selector: 'my-child',
  template: `
    

      
I am the child.
      My name is {{firstName}} {{lastName}} Jr.
      

     The name I got from my parent was: {{firstName}} {{lastName}}

    
  `
})
export class ChildComponent {
  @Input() firstName: string;
  @Input() lastName: string;
}

App Component:

//our root app component
import {Component} from '@angular/core';
import {ParentComponent} from './parent.component';

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

      
    
  `
})
export class App {

  constructor() {
  }
}