title: How to add auto-increment number when pushing item in array using angular?
body: <p>I am trying to push the value into the array and then showing in the view. All is working fine but i want to add auto-increment number with the item. I have following array in <code>data.json</code> file</p>
  
  <pre><code>[   
      {"id":1,"name":"John","gender":"Male"},
      {"id":2,"name":"Smith","gender":"Male"},
      {"id":3,"name":"Linda","gender":"Female"},
      {"id":4,"name":"Jerry","gender":"Female"}
  ]
  </code></pre>
  
  <p>In the <code>user.service</code> file </p>
  
  <pre><code>private JsonDirectory: string = "assets/data.json"
  constructor(private _httpReference: Http){}
  getUsers(){
      return this._httpReference.get(this.JsonDirectory)
          .map((responseReference:Response) =&gt; responseReference.json());
  }
  </code></pre>
  
  <p>In the <code>user.component</code> i am pushing the input value into the array on pressEnter event, since i have only one input value so i have pushed but there is also <code>id</code> and it should be auto-incremented. Following are code which i am trying</p>
  
  <pre><code>UserArray = [];
  constructor(private userService: UserService, private _location: Location){}
  show_value: string = '';
      OnPressEnter(show_value: string){ 
          var inputValue = show_value;
          this.show_value = show_value;
          this.UserArray.push({"id":5,"name":inputValue }); 
      }
  </code></pre>
  
  <p>You can see id is static i want to make it dynamic.</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li *ngFor="let userCourse of UserArray" (click)="onSelect(userCourse.name)"&gt;
  &lt;span&gt;{{userCourse.id}}&lt;/span&gt; | &lt;a style="cursor:pointer;"&gt;{{userCourse.name}} &lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>