I am new to Angular and have a question regarding scopes. While I couldn't find an exact match for my question in previous queries, I will try to clarify it with the code snippet below:
@Component({
selector: 'item-selector',
templateUrl: './item.component.html'
})
export class ItemComponent implements OnInit {
items: ITem[]; // ITem model with a numeric property 'price'
totalPrices = 0; // variable to hold total price of items array (sum of item.price)
ngOnInit() {
items = data from server....
}
onPricesChange(event): void { // triggered on price change
// My question is: how can I access the list of Items here? (to update totalPrices field)
// this.items returns undefined
}
deleteFromItems(item: ITem) {
// However, the list of Items (this.items) can be accessed HERE from the click listener !!!
}
}
<tr *ngFor="let item of items">
<td><input type="number" [(ngModel)]="item" (input)="onPriceChange($event)">
</td>
<td class="text-right">
<div class="btn-group">
<button type="submit" (click)="deleteFromItems(item)"
class="btn btn-danger btn-sm">
<fa-icon [icon]="'times'"></fa-icon>
<span class="d-none d-md-inline" >Delete</span>
</button>
</div>
</td>
</tr>