title: Easy way to make confirm dialog box
body: <p>I am new in Angular, I want to create one generic confirm dialog box, which will have &quot;<code>Message</code>&quot;, <code>&quot; Yes and No&quot;</code> button, and one textbox to get some additional data from user before pressing &quot;<code>Yes</code>&quot; button. I am able to perform delete operation,  but I am not able to get the textbox data in my component, where it is called. I want when I press on Yes button, I should get the value of that textbox also, so that I can use it in my api request. I have tried this. I am using ng-bootstrap.</p>
  <blockquote>
  <p>component where I am using it</p>
  </blockquote>
  <pre><code>configD: ConfirmDialogConfig = {
      btnOkText: 'helo',
      btnCancelText:'bye'
    }
    constructor(
      private confirmationDialogService: ConfirmDialogService) { 
      
      }
    abc() {
      this.confirmationDialogService
      .confirm('', 'Are you sure do you want to delete?', this.configD)
      .subscribe(action =&gt; {
        if (action) {
          console.log('action', action);
        }
      });
    }
  </code></pre>
  <blockquote>
  <p>confirm dialog service:</p>
  </blockquote>
  <pre><code>setConfig(config: ConfirmDialogConfig): ConfirmDialogConfig {
      return config = {
        ...this.confirmDialogConfig,
        ...config
      };
    }
  
    confirm(
      title: string,
      message?: string,
      config?: ConfirmDialogConfig
      ): Observable&lt;boolean&gt; {
      const modalRef = this.modalService.open(ConfirmDialogComponent, config ? this.setConfig(config) : this.confirmDialogConfig);
      const modalContentOptions = config ? this.setConfig(config) : this.confirmDialogConfig;
      modalRef.componentInstance.title = title;
      modalRef.componentInstance.message = message;
      modalRef.componentInstance.btnOkText = modalContentOptions.btnOkText;
      modalRef.componentInstance.btnCancelText = modalContentOptions.btnCancelText;
  
      return from(modalRef.result);
    }
  </code></pre>
  <blockquote>
  <p>cofirm dialog component</p>
  </blockquote>
  <pre><code>&lt;div class=&quot;alertify-show&quot;&gt;
      &lt;div *ngIf=&quot;message&quot; class=&quot;modal-body&quot;&gt;
          &lt;div class=&quot;row justify-content-center&quot;&gt;
           &lt;p class=&quot;message mb-1&quot;&gt; {{ message }}&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;row justify-content-center&quot;&gt;
            &lt;label type=&quot;button&quot; class=&quot;btn col-1 btn-block btn-soft-primary&quot; (click)=&quot;accept()&quot;&gt;
              {{ btnOkText }}
            &lt;/label&gt;
            &lt;label type=&quot;button&quot; class=&quot;btn btn-soft-danger ml-2&quot; (click)=&quot;decline()&quot;&gt;
              {{ btnCancelText }}
            &lt;/label&gt;
          &lt;/div&gt;
  
          &lt;textarea rows=&quot;3&quot; [(ngModel)]=&quot;inputText&quot;&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        
  &lt;/div&gt;
  </code></pre>
  <blockquote>
  <p>its ts file</p>
  </blockquote>
  <pre><code>export class ConfirmDialogComponent {
    @Input() title: string;
    @Input() message: string;
    @Input() btnOkText: string;
    @Input() btnCancelText: string;
    @Output() inputData: EventEmitter&lt;any&gt; =  new EventEmitter&lt;any&gt;();
    constructor(private activeModal: NgbActiveModal) {}
    inputText: string='abc';
  
    accept(): void {
      this.activeModal.close(true);
      this.inputData.emit(this.inputText)
    }
  
    decline(): void {
      this.activeModal.close(false);
    }
  
    dismiss(): void {
      this.activeModal.dismiss();
    }
  </code></pre>
  <p>What else I can do in this? Or anyone knows any other way to do the same. Please help. I am trying it from last 2 days. Thanks in advance!!!</p>