3

I am trying to bind data to an ng-container that is in Angular 4 now. The component loads fine, but when I add [componentData]="testing" I get error

<ng-container *ngComponentOutlet="components.name"  [componentData]="testing">
</ng-container>

Error

Error: Template parse errors:
Can't bind to 'componentData' since it isn't a known property of 'ng-container'.
1. If 'componentData' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("'Textarea' ">
                                      <ng-container *ngComponentOutlet="widget.widgetComponent.component"  [ERROR ->][componentData]="testing">
                                      </ng-container>
                            </div>

Is it true you can't bind data to ngComponentOutlet?

Chris Tarasovs
  • 703
  • 2
  • 21
  • 54
  • you are having `ng-container` which is used in case of `template`. `[componentData]` is a custom `@Input()` property which is not available as your input. – Aravind May 27 '17 at 18:58
  • Take a look at https://stackoverflow.com/questions/44281288/reflectiveinjector-is-not-instantiating-component-correctly-with-ngcomponentoutl Here is an alternative https://stackoverflow.com/questions/42522633/angular-4-assign-input-for-ngcomponentoutlet-dynamically-created-component – yurzui Jun 01 '17 at 05:32

1 Answers1

0

To fix this you can create a custom component

'custom-ng-container'

@Input() componentName : any;
@Input() componentData : any[];

HTML will look like

<ng-container *ngComponentOutlet="componentName" >

</ng-container>

You should be using in your parent component as 

<custom-ng-container [componentName]="components.name"  [componentData]="testing"> </custom-ng-container>
Aravind
  • 40,391
  • 16
  • 91
  • 110