How to two-way data bind in nested array in Angular

Question

Say you have a list of tasks which in turn has a list of subtasks and you want the subtasks to be changable - How come that angular doesn't properly two-way bind the data for the subtask?

HTML

<div *ngFor="let task of tasks">
  Task value: <input [(ngModel)]="task.value">
  <br>
  <div *ngFor="let subtask of task.subtasks">
    Subtask: <input [(ngModel)]="subtask">
    </div>
</div>

{{ tasks | json }}

TS

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  tasks = [{
    value: 'Task 1',
    subtasks: ['Hello']
  }]  
}

https://stackblitz.com/edit/angular-agrzfs

Sajeetharan · Accepted Answer · 2019-01-12 14:02:45Z

2

The problem here is with ngFor Each input has to have a unique name . To solve it,

use task.subtasks[index] instead of item with ngModel

Also you need to use trackByIndex inorder to avoid the slowness as it re-creates the DOM every time you change a string in your array

<div *ngFor="let subtask of task.subtasks;let index = index;trackBy:trackByIndex;">
    Subtask: <input [(ngModel)]="task.subtasks[index]">
</div>

STACKBLITZ DEMO

answered Jan 12, 2019 at 14:02

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Comments

Nenad Radak · Accepted Answer · 2019-01-12 14:02:49Z

1

You need to access index of sublist like on this code snippet

add index counter on list and access via tas.sublist[i]

   <div *ngFor="let task of tasks">
      Task value: <input [(ngModel)]="task.value">
    <br>
    <div *ngFor="let subtask of task.subtasks; let i = index">
      Subtask: <input [(ngModel)]="task.subtasks[i]">

   </div>
 </div>

{{ tasks | json }}

answered Jan 12, 2019 at 14:02

Nenad Radak

3,6982 gold badges31 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to two-way data bind in nested array in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related