Passing a value to Component inside a ngContent

Question

I'm trying to pass a value from a parent component (MainComponent) to a child component (ChildComponent), but the child component is not declared in the parent template instead it is loaded inside a ngContent from the parent's parent component (the AppComponent).

@Component({
  selector: 'my-app',
  template: '<div>' + 
  '<main-component><child-component [big]="big"></child-component></main-    component>' + 
  '<main-component><childuo-component [small]="big"></childuo-component></main-component>' + 
  '</div>'
})
export class AppComponent { }

@Component({
  selector: 'main-component',
  template: '<div><div>{{big | lowercase}}</div><div><ng-content></ng-content></div>'
})
export class MainComponent { 
  big: string = "BIG";
}

@Component({
  selector: 'child-component',
  template: '<div>Finally: {{big}}</div>'
})
export class ChildComponent { 
  @Input() big: string;
}

@Component({
  selector: 'childuo-component',
  template: '<div>Second?: {{small}}</div>'
})
export class ChildDuoComponent { 
  @Input() small: string;
}

I created a plunker to show my question: Demo.

I updated my question to include more details how I expect to allow MainComponent to hold different child components and declare it in a top component (AppComponent).

Madhu Ranjan Madhu Ranjan · Accepted Answer · 2016-08-30T16:56:15

you don't have big as a variable defined in AppComponent hence you are not seeing the value.

Notice single quote around "'big'".

 @Component({
  selector: 'my-app',
  template: `<main-component>
     <child-component [big]="'big'"></child-component>
     <child-component [big]="someVar"></child-component>
  </main-component>`
 })
 export class AppComponent {
   someVar = 'someVar';
 }

Here is the Plunker

Hope this helps!!

Passing a value to Component inside a ngContent

1 Answers