CODEWITHSUNDEEP
angularangular-componentsangular-library
Igor Zinchenko
Igor Zinchenko

Reputation: 363

How to pass component to library (pass ng-template into component)

I need pass iterated component into another component, something like that:

<component-a>
  <ng-template *ngFor="let item of items">
    <component-b [options]="item"></component-b>
  </ng-template>
</component-a>

I tried different ways to display component-b but unfortunately don't got result. One of them use @ContentChildren decorator @ContentChildren(TemplateRef, {descendants: true}) template: QueryList<TemplateRef<any>>;

I've got templateRefs array and use forEach to createEmbeddedView into ngAfterContentInit

this.template.forEach(item => {
  this.viewContainerRef.createEmbeddedView(item);
});

If i doing that in ngAfterContentInit i've got next error

AppComponent.ngfactory.js? [sm]:1 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'options: undefined'. Current value: 'options: [object Object]'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

but component displaying. What im missing? Maby i should go another way?

If i move that into ngAfterContentChecked ive got infinity loop

Component-a HTML:

<div class="component-a">
  <ng-container></ng-container>
  <ng-content></ng-content>
</div>

Component-b Static text.

Upvotes: 0

Views: 467

Answers (1)

Igor Zinchenko
Igor Zinchenko

Reputation: 363

Solved by this.viewTemplateRef.createEmbeddedView(item).detectChanges();

Upvotes: 1

Related Questions