title: Angular: @Output EventEmitter subscription
body: <p>I've coded a directive with an <code>@Output EventEmitter</code> property:</p>
  
  <pre><code>@Directive({
      selector: '[ifValid]'
  })
  export class SubmitValidationDirective {
  
      @Output('ifValid') valid = new EventEmitter&lt;void&gt;();
  
      constructor(
          private formRef: NgForm
      ) {}
  
      @HostListener('click')
      handleClick() {
          this.emitIfValid();
      }
  
      private emitIfValid() {
          if (this.formRef.valid) {
             this.valid.emit();
          }
      }
  
  }
  </code></pre>
  
  <p>So, I'm using this like:</p>
  
  <pre><code>&lt;button (ifValid)="save()"&gt;
  </code></pre>
  
  <p>So then, into my component:</p>
  
  <pre><code>private save() {
      this.service.push(this.user, this.toCreate)
         .pipe(
             take(1)
         )
         .subscribe();
  }
  </code></pre>
  
  <p>Manual subscription is noising me.</p>
  
  <p>I want that when <code>ifValid</code> raises, add this operator-like <code>switchMap(() =&gt; this.service.push(...))</code>.</p>
  
  <p>I would like to know if it's possible to subscribe to <code>ifValid</code> out of html. I mean, Could I subscribe to <code>ifValid</code> inside of my component?</p>
  
  <p>I hope I've explained so well.</p>