title: Angular Event emitter of one component gets confused with another
body: <h1>BACKGROUND</h1>
  
  <p>I have two components image-input-single and a test container. image-input-single is a "dumb" component that simplifys the process of selecting an image, getting the compressed file and it's url.</p>
  
  <p>It's Typescript file and HTML file is shown bellow</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@Component({
    selector: "app-image-input-single",
    templateUrl: "./image-input-single.component.html",
    styleUrls: ["./image-input-single.component.scss"]
  })
  export class ImageInputSingleComponent implements OnInit {
    @Input()
    image ? : string;
  
    @Input()
    circular!: boolean;
  
    @Output()
    imageAdded = new EventEmitter &lt; Image &gt; ();
  
    @Output()
    imageRemoved = new EventEmitter &lt; Image &gt; ();
  
    onImageClear = () =&gt; {
      console.log("Image clear");
      if (this.image) {
        this.imageRemoved.emit({
          image: this.image
        });
      }
    };
  
    constructor(
      private ng2ImgMax: Ng2ImgMaxService,
      public sanatizer: DomSanitizer
    ) {}
  
    ngOnInit() {
      console.log(this.image);
    }
    onFileChanged(event: any) {
      if (event.target.files &amp;&amp; event.target.files[0]) {
        const rawImage = event.target.files[0];
        this.ng2ImgMax.compressImage(rawImage, 0.2).subscribe(
          result =&gt; {
            const file = new File([result], result.name);
            const reader = new FileReader();
            // @ts-ignore
            reader.onload = (pe: ProgressEvent) =&gt; {
              this.imageAdded.emit({
                // @ts-ignore
                image: pe.target.result,
                imageFile: file
              });
            };
  
            reader.readAsDataURL(file);
          },
          error =&gt; {
            console.log(error);
          }
        );
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="file" (change)="onFileChanged($event)" accept="image/*" multiple id="imageInput"&gt;
  &lt;div [ngClass]="{'boxCircular': circular,
  'box': true}"&gt;
    &lt;label for="imageInput"&gt;
  
      &lt;mat-icon *ngIf="!image; else imageTemp" class="camIcon"&gt;camera_alt&lt;/mat-icon&gt;
  
      &lt;ng-template #imageTemp&gt;
        &lt;button mat-icon-button class="cancelButton" (click)="onImageClear()" type="button"&gt;
          &lt;mat-icon class="cancelIcon"&gt;cancel&lt;/mat-icon&gt;
        &lt;/button&gt;
        &lt;img [src]="sanatizer.bypassSecurityTrustUrl(image)" [ngClass]="{'profilePic': circular, 'book': !circular}"&gt;
      &lt;/ng-template&gt;
    &lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I then have a simple component which contains two instances of image-input-single </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from "@angular/core";
  import { Image } from "src/app/models/Image";
  
  @Component({
    selector: "app-test",
    templateUrl: "./test.component.html",
    styleUrls: ["./test.component.scss"]
  })
  export class TestComponent implements OnInit {
    constructor() {}
  
    image1?: Image;
    image2?: Image;
  
    imageAdd1 = (image: Image) =&gt; {
      console.log("1");
      this.image1 = image;
    };
  
    imageAdd2 = (image: Image) =&gt; {
      console.log("2");
      this.image2 = image;
    };
  
    imageRemove1 = (image: Image) =&gt; {
      this.image1 = image;
    };
  
    imageRemove2 = (image: Image) =&gt; {
      this.image2 = image;
    };
  
    ngOnInit() {
      this.image2 = {
        image: "https://i.stack.imgur.com/zwwhZ.png"
      };
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;app-image-input-single (imageAdded)="imageAdd1($event)" (imageRemoved)="imageRemove1($event)" [image]="image1?.image"&gt;
  
  &lt;/app-image-input-single&gt;
  &lt;app-image-input-single (imageAdded)="imageAdd2($event)" (imageRemoved)="imageRemove2($event)" [image]="image2?.image"&gt;
  
  &lt;/app-image-input-single&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h1>PROBLEM</h1>
  
  <p>imageAdd2 or imageRemove2 is never ever triggered even when interacting with the second image input select component. imageAdd1 and imageRemove1 is always triggered when ever adding or removing an image from 1 or 2. </p>
  
  <p>Been dealing with this for days and nothing I've tried has worked, would greatly appreciate any help. </p>