title: get result in parent component after selectAll and unSelectAll event emitted from child (Angular)
body: <p>Hi I am now working on angular to build a multiselect dropdown using ng-multiselect-dropdown(<a href="https://www.npmjs.com/package/ng-multiselect-dropdown" rel="nofollow noreferrer">https://www.npmjs.com/package/ng-multiselect-dropdown</a>).</p>
  <p>I used parent-child component communication through event emitter:
  in child.component.ts:</p>
  <pre><code>import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
  import {IDropdownSettings} from 'ng-multiselect-dropdown';
  
  export interface IMultiDropdownConfig {
    placeholder: string;
    header: string;
    dropdownSettings: IDropdownSettings;
  }
  
  @Component({
    selector: 'app-multi-dropdown',
    templateUrl: './multi-dropdown.component.html',
    styleUrls: ['./multi-dropdown.component.scss']
  })
  export class MultiDropdownComponent implements OnInit {
  
    @Input() dropdownItems: any[];
  
    @Input() selectedItems;
  
    @Input() header: string;
  
    @Input() placeholder: string;
  
    @Input() dropdownSettings: IDropdownSettings;
  
    @Input() loading;
  
    @Output() itemSelectEvent = new EventEmitter();
  
    @Output() itemDeselectEvent = new EventEmitter();
  
    @Output() selectAllEvent = new EventEmitter();
  
    @Output() deselectAllEvent = new EventEmitter();
  
    @Output() selectedItemsChange = new EventEmitter();
  
    constructor() { }
  
    ngOnInit(): void {
    }
  
    onSelectItem(event) {
      this.selectedItemsChange.emit(this.selectedItems);
    }
    onDeselectItem(event) {
      this.selectedItemsChange.emit(this.selectedItems);
    }
    onSelectAll(event) {
      this.selectedItemsChange.emit(this.selectedItems);
    }
  
    onDeselectAll(event) {
      this.selectedItemsChange.emit(this.selectedItems);
    }
  }
  
  </code></pre>
  <p>in child.component.html:</p>
  <pre><code>&lt;div class=&quot;multi-dropdown-item&quot;&gt;
    &lt;div class=&quot;multi-dropdown-header&quot;&gt;{{header}}&lt;/div&gt;
    &lt;div *ngIf=&quot;!this.loading&quot; class=&quot;multi-dropdown-body&quot;&gt;
      &lt;ng-multiselect-dropdown
        [placeholder]=&quot;placeholder&quot;
        [data]=&quot;dropdownItems&quot;
        [(ngModel)]=&quot;selectedItems&quot;
        [settings]=&quot;dropdownSettings&quot;
        (onSelect)=&quot;onSelectItem($event)&quot;
        (onDeSelect)=&quot;onDeselectItem($event)&quot;
        (onSelectAll)=&quot;onSelectAll($event)&quot;
        (onDeSelectAll)=&quot;onDeselectAll($event)&quot;&gt;
      &lt;/ng-multiselect-dropdown&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Then in parent.component.html:</p>
  <pre><code>          &lt;app-multi-dropdown
              [loading]=&quot;filterPropertiesMap.get(filterEntry).loading&quot;
              [dropdownItems]=&quot;filterPropertiesMap.get(filterEntry).items&quot;
              [(selectedItems)]=&quot;filterPropertiesMap.get(filterEntry).selectedItems&quot;
              [dropdownSettings]=&quot;filterPropertiesMap.get(filterEntry).setting&quot;
              [placeholder]=&quot;filterPropertiesMap.get(filterEntry).name&quot;
              [header]=&quot;filterPropertiesMap.get(filterEntry).name&quot;
              (itemSelectEvent)=&quot;onItemSelect($event)&quot;
              (itemDeselectEvent)=&quot;onItemDeselect($event)&quot;
              (selectAllEvent)=&quot;onSelectAll($event)&quot;
              (deselectAllEvent)=&quot;onDeselectAll($event)&quot;
  
            &gt;&lt;/app-multi-dropdown&gt;
  </code></pre>
  <p>in parent.component.ts I didn't do anything but log:</p>
  <pre><code>  onItemSelect($event) {
      console.log(&quot;onItemSelect&quot;);
  
    }
    onItemDeselect($event) {
      console.log(&quot;onItemDeselect&quot;);
  
    }
  
    onSelectAll($event) {
      console.log(&quot;onSelectAll&quot;);
  
    }
  
    onDeselectAll($event) {
      console.log(&quot;onDeselectAll&quot;);
  
    }
  </code></pre>
  <p>in above code <code>filterPropertiesMap</code> defines settings.
  You may see that what I am doing is in child component, I created eventemitters for select, deselect, and in the function I emitt <code>this.selectedItems</code>.</p>
  <p>But I don't think this is a good way to implement this, and actually, it doesn't work well.
  sometimes, when I select or deselect, it doesn't changed immediately.</p>
  <p><strong>So how to implement this? when I select deselect, selectAll, deselectAll. my parent component can react immediately and correctly.</strong></p>
  <p>Also the weird thing is: when I load the page, I will have some default values chose, for example 6,7,8,9. Then I select all and it still 6,7,8,9. and then after that I deselect all agin select all, the field will change to all(for example 1,2,3,4,5,6,7,8,9). <strong>Does event emitter has delay or will ignore some choices??</strong></p>
  <p>Edit:</p>
  <p>I tried to extract all the necessary snippets of code to build a project here:
  <a href="https://drive.google.com/file/d/1BlV2EtdwZhqqpkdiC0_mlaw_r3w6Bder/view?usp=sharing" rel="nofollow noreferrer">https://drive.google.com/file/d/1BlV2EtdwZhqqpkdiC0_mlaw_r3w6Bder/view?usp=sharing</a></p>
  <p>I hope when I all the event(select, deselect, selectAll, deselectAll) can be emitted and received by parent component</p>
  <p><strong>sorry one mistake:</strong> the app-multi-dropdown tag in parent component should be <strong>app-child</strong></p>