0

I have two components

1) usercomponent(parent)

2) multiselectcomponet(child)

usercomponent.ts

items = [{
            "Id" : "1",
            "companyName" : "Synaptech",

        },{
            "Id" : "2",
            "companyName" : "Synaptech1",

        },{
            "Id" : "3",
            "companyName" : "Synaptech2",

        },{
            "Id" : "4",
            "companyName" : "Synaptech3",

        },{
            "Id" : "5",
            "companyName" : "Synaptech4",

        },{
            "Id" : "6",
            "companyName" : "Synaptech4",

        }];

user.html

<multi-select [otherUsers]="items"
                        (notifyParent)="getNotification($event)"></multi-select>

multiselect.componet

private _subscription: Subscription;
 public _items: Array<any>;
@Input() otherUsers: Observable<any[]>;
@Output() notifyParent: EventEmitter<any> = new EventEmitter();

ngOnInit() {
    console.log(this.otherUsers, '#####otherUsers!!!')
    if (this.otherUsers !== undefined) {
     // this._items = this.otherUsers
      this._subscription = this.otherUsers.subscribe(res => this._items = res);
    }
}

 select(item: any) {
    item.checked = !item.checked;

    if (this.checkeditems.length !== 0) {
      if (_.find(this.checkeditems, { 'id': item.id })) {
        const index = this.checkeditems.indexOf(item, 0);
        if (index > -1) {
          this.checkeditems.splice(index, 1);
          this.notifyParent.emit( this.checkeditems);
        }
      } else {
        if (item.checked === true) {
          this.checkeditems.push(item);
          this.notifyParent.emit( this.checkeditems);
        }
      }
    }  else {
        this.checkeditems.push(item);
        this.notifyParent.emit( this.checkeditems);
      }

  }

  toggleSelect() {
    this.isOpen = !this.isOpen;
   // this._subscription = this.otherUsers.subscribe(res => this._items = res);
  }

multi-select.html

<button class="setforselecton" (click)="toggleSelect()">
  <div *ngIf="checkeditems.length > 0"></div>
  <ul class="selected-list">
    <li *ngFor="let item of checkeditems">
      <span>{{item.username}}<a (click)="select(item)">
        <i class="icon wb-close"></i>
      </a></span>
    </li>
  </ul>
  <span><i class="icon wb-triangle-down pull-right"></i></span>
</button>
<ul class="list-in-list-forcheckbooxes dropsetset">
  <li class="checkbox" *ngFor="let item of _items">
    <a (click)="select(item)" class="dropdown-item">
      <i class="fa fa-fw" [ngClass]="{'fa-check': item.checked, 'glyphicon-none': !item.checked}"></i>
      <span [innerHtml]="item.username"></span>
    </a>
  </li>
 </ul>

from parent to child, child to parent data passing corect, after getting data from child to parent using @output, if i am going to delete some properties of object it's also affecting child component obj, after getting data from child i want to delete some prperty form every obj like company name,

please check my issue with full implementation here https://plnkr.co/edit/mNXQ6v?p=preview

Thanks in advance

Runali
  • 332
  • 1
  • 4
  • 17
  • The reason is that JS objects are passed by **reference**. You can avoid this by making deep copy (clone) your objects/array. – AT82 Jul 27 '17 at 07:36
  • can you please provide any example – Runali Jul 27 '17 at 07:44
  • Well here's how to deal with arrays: https://stackoverflow.com/questions/597588/how-do-you-clone-an-array-of-objects-in-javascript and with objects I'd use `Object.assign()` you just have to do this before starting to make changes to your objects. So when the parent receives the data by `Output` you there clone the array :) – AT82 Jul 27 '17 at 08:01

0 Answers0