CODEWITHSUNDEEP
javascriptangulartypescriptangular-template
San Jaisy
San Jaisy

Reputation: 17108

ngTemplateOutletContext with ng-tempate and for loop for the reference value with angular error variable doesn't exits

I have an Array of a component as below

 <ng-container [ngTemplateOutlet]="controlArrayContainer"
     [ngTemplateOutletContext]="{controls:control?.componentProperty?.formArray, index: i}">
 </ng-container>

Passing the data from the context as

{controls:control?.componentProperty?.formArray, index: i}

In the template section consuming the data as below

<ng-template #controlArrayContainer let-control="controls" let-index="index">
    <ng-container *ngFor="let layout of controls; let i = index">
    </ng-container>
</ng-template>

Keep getting an exception during the compile time as

Error: projects/falcon-core/src/lib/component/reactive-controls/reactive-controls.component.html:32:41 - error TS2339: Property 'controls' does not exist on type 'ReactiveControlsComponent'.

32     <ng-container *ngFor="let layout of controls; let i = index">

Upvotes: 0

Views: 2847

Answers (1)

herondale
herondale

Reputation: 799

In your code, you are using let-control, so you should use control in the ngFor loop, instead of controls:

<ng-template #controlArrayContainer let-control="controls" let-index="index">
    <ng-container *ngFor="let layout of control; let i = index">
    </ng-container>
</ng-template>

Upvotes: 1

Related Questions