title: Angular 2: Bootstrap Modal is updating the table in background
body: <p>I have a table of students with CRUD operation. For each row I have an Edit button</p>
  
  <pre><code>&lt;table class="table table-bordered table-striped"&gt;
      &lt;thead class="studentHeader"&gt;
      &lt;tr&gt;
        &lt;td&gt;Roll Number&lt;/td&gt;
        &lt;td&gt;First Name&lt;/td&gt;
        &lt;td&gt;Last Name&lt;/td&gt;
        &lt;td&gt;Gender&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
  
      &lt;tr *ngFor="let student of studentList;let i=index"&gt;
        &lt;td&gt;{{student.rollNumber}}&lt;/td&gt;
        &lt;td&gt;{{student.firstName}}&lt;/td&gt;
        &lt;td&gt;{{student.lastName}}&lt;/td&gt;
        &lt;td&gt;{{student.gender}}&lt;/td&gt;
        &lt;td&gt;&lt;button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" (click)="editStudent(student)"&gt;Edit&lt;/button&gt;&lt;/td&gt;
        &lt;td&gt;&lt;button type="button" class="btn btn-danger"&gt;Delete&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;/tbody&gt;
    &lt;/table&gt; 
  </code></pre>
  
  <p>And the modal</p>
  
  <pre><code>    &lt;div id="myModal" class="modal fade" role="dialog"&gt;
          &lt;div class="modal-dialog"&gt;
  
            &lt;!-- Modal content--&gt;
            &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                &lt;h4 class="modal-title"&gt;Add Student&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                &lt;label path="rollnumber"  class="sr-only"&gt;Roll Number&lt;/label&gt;
                &lt;input type="text" id="rollNum" class="form-control" [(ngModel)]="studentObj.rollNumber" name="rollnumber" placeholder="Student Roll Number" required autofocus /&gt;&lt;br&gt;
                &lt;label path="firstName"  class="sr-only"&gt;First Name&lt;/label&gt;
                &lt;input type="text" id="firstname" class="form-control" [(ngModel)]="studentObj.firstName" name="firstname" placeholder="Student First Name" required /&gt;&lt;br&gt;
                &lt;label path="lastName"  class="sr-only"&gt;Last Name&lt;/label&gt;
                &lt;input type="text" id="lastname" class="form-control" [(ngModel)]="studentObj.lastName" name="lastname" placeholder="Student Last Name" required /&gt;
                &lt;h5&gt;&lt;span class="label label-default"&gt;Gender&lt;/span&gt;&amp;nbsp;&amp;nbsp;
                  &lt;input type="radio" name="gender" id="male" value="Male" [(ngModel)]="studentObj.gender"&gt;
                  &lt;label for="male"&gt;Male&lt;/label&gt;&amp;nbsp;&amp;nbsp;
                  &lt;input type="radio" name="gender" id="female" value="Female" [(ngModel)]="studentObj.gender"&gt;
                  &lt;label for="female"&gt;Female&lt;/label&gt;&lt;br&gt;
                &lt;/h5&gt;
   &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal" (click)="addStudent(studentObj)" *ngIf="studentAdd"&gt;Add&lt;/button&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal" *ngIf="studentUpdate" (click)="updateStudent(studentObj)"&gt;Update&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>And the component part</p>
  
  <pre><code>private studentList: Array&lt;StudentDto&gt; = [];
    private studentObj: StudentDto = {};
    private studentAdd: boolean = true;
    private studentUpdate: boolean = false;
  
    constructor() { }
  
    ngOnInit() {
      this.studentList = StudentData;
    }
  
    private addStudent(addStudentObj: StudentDto): void {
      this.studentList.push(addStudentObj);
    }
  
    private editStudent(editStudentObj: StudentDto): void {
      this.studentAdd = false;
      this.studentUpdate = true;
      this.studentObj = editStudentObj;
    }
  
    private updateStudent(updateStudentObj: StudentDto): void {
      console.log(updateStudentObj)
  
    }
  </code></pre>
  
  <p>The problem I'm facing is - In Modal when I edit a student field, values get edited in the background table too and it looks weird. This is because I'm updating the same array of objects.</p>
  
  <p>How to restrict this behavior i.e. Same array should get updated but after clicking the update button in Modal.</p>