<p dir="auto">In a simple component with an Output as follows:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Output() final trigger = new LazyEventEmitter&lt;String&gt;();"><pre class="notranslate"><code class="notranslate">@Output() final trigger = new LazyEventEmitter&lt;String&gt;();
</code></pre></div>
<p dir="auto">This error is thrown:<br>
"Bad state: Stream has already been listened to."</p>
<p dir="auto">Under the hood, the component uses a LazyEventEmitter (which is just a wrapper of Stream/Stream Controller), but it is <strong>not broadcast</strong>. Changing the controller to instantiate a broadcast stream fixes this, but up until now, we have been able to expect only one subscription from Angular framework.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Output() final trigger = new LazyEventEmitter&lt;String&gt;.broadcast();"><pre class="notranslate"><code class="notranslate">@Output() final trigger = new LazyEventEmitter&lt;String&gt;.broadcast();
</code></pre></div>
<p dir="auto">Consider this component:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Component({
  selector: 'hero-detail',
  inputs: ['hero'],
  outputs: ['deleted'],
  template: `
    &lt;div&gt;
      &lt;b&gt;Hero Detail: {{hero?.fullName}}&lt;/b&gt;
      &lt;button (click)=&quot;onDelete()&quot;&gt;Delete&lt;/button&gt;
    &lt;/div&gt;
  `
})
class HeroDetailComponent {

  @Input()
  hero: Hero;

  @Output()
  deleted = new EventEmitter();

  onDelete() {
    this.deleted.next(this.hero);
  }
}"><pre class="notranslate"><code class="notranslate">@Component({
  selector: 'hero-detail',
  inputs: ['hero'],
  outputs: ['deleted'],
  template: `
    &lt;div&gt;
      &lt;b&gt;Hero Detail: {{hero?.fullName}}&lt;/b&gt;
      &lt;button (click)="onDelete()"&gt;Delete&lt;/button&gt;
    &lt;/div&gt;
  `
})
class HeroDetailComponent {

  @Input()
  hero: Hero;

  @Output()
  deleted = new EventEmitter();

  onDelete() {
    this.deleted.next(this.hero);
  }
}
</code></pre></div>
<p dir="auto">Now we bind to it:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;hero-detail [hero]=&quot;currentHero&quot; (deleted)=&quot;onDeleted($event)&quot;&gt;&lt;/hero-detail&gt;"><pre class="notranslate"><code class="notranslate">&lt;hero-detail [hero]="currentHero" (deleted)="onDeleted($event)"&gt;&lt;/hero-detail&gt;
</code></pre></div>
<p dir="auto">When the user clicks the Delete button inside <code class="notranslate">&lt;hero-detail&gt;</code>, the parent's <code class="notranslate">onDeleted</code> method is called twice.</p>
<p dir="auto">Remove either the <code class="notranslate">[outputs]</code> array or the <code class="notranslate">@Output</code> decoration and the  parent's method is called only once.</p>
<p dir="auto">The number of parent method calls increase by one for each additional <code class="notranslate">@Output</code> decoration.</p>
<p dir="auto">I maintain that any number of mentions as an output &gt; 1  should still mean a single call to the parent method.</p>