title: Reusable component emitting same value in component when use multiple times
body: <p>I have created Angular reusable material multi select options as in below. When I used this reusable component in app.ts multiple times, both mat-reusable-select values are overwriting each other. How I can get both values in app.ts? What I have missed?</p>
  <p><strong>mat-reusable-select.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field appearance=&quot;none&quot;
                  floatLabel=&quot;never&quot;&gt;
      &lt;mat-select [formControl]=&quot;multiSelectheckboxFormControl&quot;
                  (selectionChange)=&quot;onSelectionChange($event)&quot;
                  placeholder=&quot;{{placeholder}}&quot;
                  #selection
                  multiple&gt;
          &lt;mat-select-trigger class=&quot;mat-select-trigger&quot;&gt;
              {{selection.value ? selection.value.length : ''}}
              &lt;span *ngIf=&quot;multiSelectheckboxFormControl.value?.length &gt;= 1&quot;&gt;
                  {{placeholder}}
              &lt;/span&gt;
          &lt;/mat-select-trigger&gt;
          &lt;mat-option *ngFor=&quot;let item of data&quot;
                      color=&quot;primary&quot;
                      [value]=&quot;item.name&quot;&gt;{{item.name}}&lt;/mat-option&gt;
      &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <p><strong>mat-reusable-select.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>  @Input() placeholder: string;
    @Input() data: any;
    @Output() selectionChange = new EventEmitter&lt;MatSelectChange&gt;();
  
    multiSelectheckboxFormControl = new FormControl();
  
    onSelectionChange(event: MatSelectChange): any {
      this.selectionChange.emit(event.value);
    }
  </code></pre>
  <p><strong>app.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]=&quot;searchForm&quot; (ngSubmit)=&quot;onSubmit()&quot;&gt;
    &lt;mat-reusable-select [data]=&quot;products | async&quot;
    [placeholder]=&quot;'Products'&quot;
    (selectionChange)=&quot;onSelectionChange($event)&quot;&gt;
    &lt;/mat-reusable-select&gt;
  
    &lt;mat-reusable-select [data]=&quot;sales | async&quot;
    [placeholder]=&quot;'Sales'&quot;
    (selectionChange)=&quot;onSelectionChange($event)&quot;&gt;
    &lt;/mat-reusable-select&gt;
  
    &lt;button type=&quot;submit&quot;&gt;submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p><strong>app.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>onSelectionChange(event: string[]) {
    // output: ['prod1', 'product]
    console.log(event);
  }
  </code></pre>