title: Angular child component event from parent fires multiple times
body: <p>I have a click event (updateExpanded) on my parent, when clicked I fire and event off that goes to the child. the child then subscribes to this event. The problem is that the event gets called 4 times. I have tried everything I could find but just cant seem to see why it gets fired so often when it should only get fired once.</p>
  
  <p>I need to load data in my child component when my parent component gets expanded.</p>
  
  <p>Parent TS</p>
  
  <pre><code>@Output()
  isExpandedEvent = new EventEmitter&lt;string&gt;();
  
   updateExpanded(id: string) {
          this.isExpandedEvent.emit(id);
          console.log(id + " parent opened");
      }
  
  ngOnDestroy() {
          if (this.isExpandedEvent) {
              this.isExpandedEvent.unsubscribe();
          }
      }
  </code></pre>
  
  <p>Parent HTML</p>
  
  <pre><code>&lt;ngx-planned-maintenance-detail [model]="plannedMaintenanceRecurring" [index]="i" [expandedEventEmitter]="isExpandedEvent"&gt;
                  &lt;/ngx-planned-maintenance-detail&gt;
  </code></pre>
  
  <p>.........</p>
  
  <p>Child TS</p>
  
  <pre><code> @Input()
    expandedEventEmitter = new EventEmitter&lt;string&gt;();
  
    ngOnInit() {
      this.expandedEventEmitter.subscribe(data =&gt; {
          if (data) {
               console.log("detail complete");
          }
       });
    }
  
  ngOnDestroy() {
      this.expandedEventEmitter.unsubscribe();
    }
  </code></pre>
  
  <p>Parent is called once, detail called 4 times as seen below
  <a href="https://i.stack.imgur.com/BNZ82.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BNZ82.png" alt="enter image description here"></a></p>