Angular 2 Child Component removing Item from Parent Component Array

Question

Currently having issue with Child component trying to remove Parent component's Array.

Parent Component:

@Component({
    selector: 'parent',
    templateUrl: 'app/templates/parent.html'
})

export class ParentComponent {

    public items = [];
}

Parent HTML

  <child [items]="items"></child>
  <product *ngFor="let item of items><product>

Child component

@Component({
    selector: 'child',
    templateUrl: 'app/templates/child.html'
})

export class ChildComponent{
    @Input() items;

    emptyItems() {
        this.items = [];
    }
    addItem() {
        this.items.push({'title': 'foo'});
    }
}

However when I call emptyItems/addItem function, the items array in the child view will reflect on changes, however on the parent component it doesnt change.

Do I need to use Output?

Community · Accepted Answer · 2017-05-23 11:54:14Z

1

The right way is to use Output https://angular.io/docs/ts/latest/cookbook/component-communication.html#

However we can use two-ways binding on your items, this will reflect changes on both sides:

<child [(items)]="items"></child>

See more details https://angular.io/docs/ts/latest/guide/cheatsheet.html

Update: Try to empty you array differently How do I empty an array in JavaScript?

Output should work https://angular.io/docs/ts/latest/api/core/index/Output-var.html The idea is that you have to pass updated things from child to parent and manually update member items of the parent

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Jun 16, 2016 at 1:29

Andrei Zhytkevich

8,1292 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tony Over a year ago

that didnt work for me, I called emptyItems function and was hoping it wont display any item however it didnt do anything to the parent object

Collectives™ on Stack Overflow

Angular 2 Child Component removing Item from Parent Component Array

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related