title: is it possible to pass a validation function to a component that can stop the execution?
body: <p>I am creating a generic modal component that has the usual attributes to be passed: title, content (using <code>&lt;ng-content&gt;&lt;/ng-content&gt;</code>), and customization for buttons.</p>
  
  <p>My question is if I am filling the content of the modal as a form, and this form needs validation before closing the modal, how can we make the validator stop the modal from closing? </p>
  
  <p>I saw in these <a href="https://stackoverflow.com/questions/35328652/angular-pass-callback-function-to-child-component-as-input">answers</a> that it is not recommended for passing a function to the component to use <code>@Input</code> and the better way is using <code>@Output</code> which actually accesses the parent function instead of passing it. But that does not allow me to stop the modal from closing, the code looks like this now:</p>
  
  <p>in parent.component.html:</p>
  
  <pre><code>&lt;app-modal title="test" (callback)="validator()"&gt; ...form content ...&lt;/app-modal&gt;
  </code></pre>
  
  <p>in modal.component.ts:</p>
  
  <pre><code>  @Output() callback: EventEmitter&lt;any&gt; = new EventEmitter();
    onConfirm(): void {
      this.callback.emit();
      // here I should stop the execution in case the validation did not pass
      this.onClose.next(1);
      this.modalRef.hide(); // using ngx-bootstrap modal
  </code></pre>
  
  <p>}</p>
  
  <p>I can not get a return value from the callback .</p>
  
  <p>Is there a clean way to achieve this without using @Input for passing functions?</p>