title: Two way data binding an array angular 6
body: <p>I wanted to know how to make a two-way data binding of an array variable. I would like to retrieve them in an input field and to be able to modify them. But I do not know how to do that with an array.</p>
  
  <p>If I come to you it's because I did a lot of research that did not allow me to solve the problem. I read the doc angular.io but it did not help me either</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { Router, ActivatedRoute } from '@angular/router';
  import { componentsServices } from '../../services/microGrid.service';
  import { Asset } from '../../models/assets';
  import { FormGroup } from '@angular/forms';
  import { CardsService } from '../dashboard/card/cards.service';
  import { Network, DataSet, Node, Edge, IdType } from 'vis';
  import { ASSETS } from '../../models/mock-assets';
  
  declare var vis
  
  
  
  
  @Component({
    selector: 'app-micro-grid-management',
    templateUrl: './micro-grid-management.component.html',
    styleUrls: ['./micro-grid-management.component.css']
  })
  
  
  export class MicroGridManagement implements OnInit {
  
    @Input('asset') asset: Asset;
  
    assets: Asset[];
  
    constructor(private router: Router, private route: ActivatedRoute, private cardService: CardsService, private assetService: componentsServices) { }
  
    public network: Network;
    selectedIndex;
  
  
    ngOnInit() {
      let nodes = [];
      let edges = [];
      console.log(ASSETS)
  
      this.getAssets();
  
      nodes = ASSETS;
  
      edges = [
        { from: 1, to: 2, arrows: "to" },
        { from: 2, to: 3, arrows: "to" },
        { from: 3, to: 4, arrows: "to" },
        { from: 4, to: 5, arrows: "to" },
        { from: 5, to: 6, arrows: "to" },
        { from: 6, to: 7, arrows: "to" },
        { from: 8, to: 9, arrows: "to" },
        { from: 9, to: 1, arrows: "to" },
      ]
  
      let data = {
        nodes: nodes,
        edges: edges,
      };
  
  
      var myDiv = document.getElementById("network");
  
      var options = {
        interaction: { hover: true },
        nodes: { 
          shadow: true,
          shape: 'square'
        },
        edges: { shadow: true },
      };
  
      var net = new vis.Network(myDiv, data, options);
  
  
    getAssets(): void {
      this.assetService.getAssets()
      .subscribe(data =&gt; this.assets = data.slice(1,5));
    }
  
  }
  </code></pre>
  
  <p>I know this is not the way to go, that's why I need your help.
  I want to know what I'm doing wrong</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngFor="let asset of assets"&gt;
       &lt;input [(ngModel)]="Assets" value="{{asset.label}}"&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <p>here is the model that I use but I will also have it displayed in inputs to make a two way data binding. I read a lot of things but I can not fix the problem. My fields inputs is empty</p>
  
  <pre><code>    export interface Asset {
          id: number;
          label: string;
          color: string;
          shape: string;
          currentP: string;
          energy: string;
          setpp: string;
          energy2: string;
          currentq: string;
          setq: string;
          required: boolean;
      }
  
      import { Asset } from './assets';
  
      export const ASSETS: Asset[] = [
          {
              id: 1,
              label: 'PV Panels',
              shape: 'square',
              color:'#4286f4',
              currentP: '100',
              energy: 'kW',
              setpp: '100',
              currentq: '2',
              energy2: 'kVar',
              setq: '2',
              required: true
          },
          {
              id: 2,
              label: 'Wind Turbines',
              shape: 'square',
              color:'#4286f4',
              currentP: '100',
              energy: 'kW',
              setpp: '100',
              currentq: '2',
              energy2: 'kVar',
              setq: '2',
              required: true
          },
          {
              id: 3,
              label: 'Gensets',
              shape: 'square',
              color: '#f4d041',
              currentP: '100',
              energy: 'kW',
              setpp: '100',
              currentq: '2',
              energy2: 'kVar',
              setq: '2',
              required: true
          }
      ];
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/AzTMD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AzTMD.png" alt="enter image description here"></a></p>