title: Angular 2 I don't know how to delete a row of a pushed Object
body: <p>First let me be clear about my problem/issue: </p>
  
  <p>First it was like this: <a href="https://www.dropbox.com/s/92z2oe7f4w5x2b5/conditions.jpg?dl=0" rel="nofollow">https://www.dropbox.com/s/92z2oe7f4w5x2b5/conditions.jpg?dl=0</a> Here it deletes the last created Object in my case Conditions.</p>
  
  <p>but i want to delete each condition separately like this see the red box next to each row: <a href="https://www.dropbox.com/s/ptwq6sk6da4p21k/new.jpg?dl=0" rel="nofollow">https://www.dropbox.com/s/ptwq6sk6da4p21k/new.jpg?dl=0</a></p>
  
  <pre><code>import {Component, OnInit, DynamicComponentLoader, Input} from 'angular2/core';
  import {Condition}    from './condition';
  
  import {DateCondition}    from './datecondition.component';
  import {StringCondition}    from './stringcondition.component';
  import {SelectCondition}    from './selectcondition.component';
  import {ConditionDetailComponent}    from './conditiondetail.component';
  
  import {ConditionService} from './condition.service'
  
  @Component({
      selector: 'condition-builder',
      templateUrl: 'app/conditionbuilder.component.html',
      directives: [ConditionDetailComponent],
  })
  
  export class ConditionBuilderComponent implements OnInit {
      conditions: Condition[] = [];
      catalog: Condition[] = [];
  
  constructor(public _conditionService: ConditionService) { }
  
  getConditions() {
      this._conditionService.getConditions().then(conditions =&gt; this.catalog = conditions);
  }
  
  ngOnInit() {
      this.getConditions();
  }
  
  onChange(conditionsIndex, selectedCondition:string): void {
      this.conditions[conditionsIndex] = this.catalog.find(condition =&gt; condition.name == selectedCondition);
  }
  
  newCondition() {
      this.conditions.push(this.catalog[0]);
  }
  
  deleteCondition() {
      this.conditions.pop();
  }
  }
  </code></pre>
  
  <p>In the code above i'll import the getConditions with the object of conditions in my case. Does any one know how i do this and what is the best way to handle this issue?</p>
  
  <p>Here i want to    </p>
  
  <pre><code>import {Component, OnInit, Input, DynamicComponentLoader, ElementRef} from 'angular2/core';
  
  import {Condition}    from './condition';
  
  import {DateCondition}    from './datecondition.component';
  import {StringCondition}    from './stringcondition.component';
  import {SelectCondition}    from './selectcondition.component';
  import {ConditionBuilderComponent} from "./conditionbuilder.component";
  
  @Component({
      selector: 'condition-detail',
      template: '&lt;div #child&gt;&lt;/div&gt;'
      + '&lt;a class="btn btn-danger" (click)="deleteCondition()"&gt;&lt;i class="glyphicon glyphicon-minus"&gt;&lt;/i&gt;&lt;/a&gt;'
  })
  
  export class ConditionDetailComponent implements OnInit  {
      @Input() condition: Condition;
  
      dcl:DynamicComponentLoader;
      elementRef:ElementRef;
  
      constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) {
          this.dcl = dcl;
          this.elementRef = elementRef;
      }
  
      ngOnInit() {
          this.dcl.loadIntoLocation(this.condition, this.elementRef, 'child');
      }
  
     deleteCondition() {
      HOW CAN I DELETE THE CONDITION ROW HERE?
  }
  </code></pre>
  
  <p>Like this is the code build, ill hope it is clear for you to help me out. How does the deleteCondition method know which row he needs to deleten and how do i delete it out of the array in the code above the page?</p>
  
  <p>Ill hope someone can help me out!!</p>