Angular 4: ngComponentOutlet - data binding

Question

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?

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
– Aravind, Commented May 27, 2017 at 18:58
Take a look at stackoverflow.com/questions/44281288/… Here is an alternative stackoverflow.com/questions/42522633/… — yurzui
– yurzui, Commented Jun 1, 2017 at 5:32

Aravind · Accepted Answer · 2017-05-27 19:02:29Z

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>

answered May 27, 2017 at 19:02

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chris Tarasovs Over a year ago

So the answear is that you can't :(

Aravind Over a year ago

yup. you have limitations of using *ngContainer

Chris Tarasovs Over a year ago

Can you updated ur answear please to that it is not possible

Vignesh Over a year ago

@Aravind i need to read componentData values in loaded component page not in 'custom-ng-container' custom component.Ex: <custom-ng-container [componentName]="components.name" [componentData]="testing"> </custom-ng-container> components:[{name:Page.component}]

Collectives™ on Stack Overflow

Angular 4: ngComponentOutlet - data binding

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related