title: Angular 4, template to add and remove multiple locations
body: <p>i am creating view to add multiple location or remove using ViewContainerRef. while cloneTemplate method all input value resets and on removeTemplate method index goes incorrect and says undefined index....and same. Is it a right way to  or something is missing? please help me out..</p>
  
  <pre><code>@Component({
    selector: 'something',
    template: `
    &lt;form #createForm="ngForm" class="form-horizontal" (submit)="submitData(createForm);"&gt;
      &lt;ng-template #clone let-index="index"&gt;
          &lt;div class="col-md-6"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label&gt;Interview Location&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="interviewLocation" [(ngModel)]="data.interview[index].interviewLocation" required&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="input-group"&gt;
                  &lt;label&gt;Remove&lt;/label&gt;
                  &lt;button type="button" class="btn btn-sm btn-danger" (click)="removeTemplate(data.interview[index], this.index)"&gt;
                      &lt;i class="fa fa-remove"&gt;&lt;/i&gt;
                  &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/ng-template&gt;
      &lt;div #container&gt;&lt;/div&gt;
      &lt;div class="add-more"&gt;
          &lt;button type="button" class="btn btn-sm btn-primary" (click)="cloneTemplate()"&gt;
          &lt;i class="fa fa-plus"&gt;&lt;/i&gt;
          &lt;/button&gt;
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-gap btn-primary" [disabled]="createForm.invalid"&gt;Submit&lt;/button&gt; 
     &lt;/form&gt;
    `
  })
  export class CreateComponent implements OnInit {
    @ViewChild('createForm') createForm;
  
    @ViewChild('clone') template: TemplateRef&lt;any&gt;;
    // Where to insert the cloned content
    @ViewChild('container', {read:ViewContainerRef}) container: ViewContainerRef;
  
    data: JobModel = new JobModel();
    count: number = 0;
  
    constructor() {
    }
  
    ngOnInit() {
      this.data.interview = [];
      this.cloneTemplate();
    }
  
    cloneTemplate(){
      this.data.interview[this.count] = new InterviewLocationModel();
      let view = this.template.createEmbeddedView({index: this.count});
      this.container.insert(view);
      this.count++;
    }
  
    removeTemplate(interviewDetail, currentTemplateIndex){
      this.container.remove(this.template[currentTemplateIndex]);
  
      var currentIndex = this.data.interview.indexOf(interviewDetail); 
      this.data.interview.splice(currentIndex, 1); 
  
    }
  
  }
  </code></pre>