Having recently started working with Angular2, I am facing a challenge with importing components in ngFor loops.
The issue seems to arise when importing components with data in ngFor loops; it checks for values in the .ts file instead of the local variable used in ngFor. My goal is to pass the variable used in ngFor to the next component.
accommodations.component (parent view)
ts:
import { Component, Input } from '@angular/core';
import { AccommodationModel } from '../../../../models/reservations/accommodation-model';
@Component({
selector: 'reservations-reservation-accommodations',
templateUrl: './accommodations.component.html'
})
export class AccommodationsComponent {
constructor() { }
@Input() accommodations: AccommodationModel[];
}
html:
<div class="card-block">
<ngb-tabset>
<ngb-tab *ngFor="let accommodation of accommodations" title="{{accommodation.arrivalDate}}">
<ng-template ngbTabContent>
<div class="table-responsive">
<table class="table table-condensed table-bordered table-striped content-divider-up">
<thead>
<tr>
<th>Arrival Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>
{{accommodation.arrivalDate}}
</td>
</tr>
</tbody>
</table>
</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
<reservations-reservation-accommodations-costs [costs]="accommodation.costs"></reservations-reservation-accommodations-costs>
</div>
costs.component (child view)
ts:
import { Component, Input } from '@angular/core';
import { CostModel } from '../../../../../models/reservations/cost-model';
@Component({
selector: 'reservations-reservation-accommodations-costs',
templateUrl: './costs.component.html'
})
export class CostsComponent {
constructor() { }
@Input() costs: CostModel[];
}
html:
<div class="row content-divider-up">
<div class="col">
{{costs.length}}
</div>
</div>
How can I effectively pass let accommodation(.costs) in ngFor to costs.component? The issue I'm encountering is that costs always appears as undefined in costs.component, as it searches for a variable named "accommodation" in the accommodations.components.ts file which is not the desired behavior.