Could not able to add angular modal popup inside onRemoving method

[yashothara]

PLEASE MAKE SURE THAT:

• you searched similar issues online (9/10 issues in this repo are solved by googling, so please...do it)
• you provide an online demo I can see without having to replicate your environment
• you help me by debugging your issue, and if you can't, do go on filling out this form

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] support request/question

Notice: feature requests will be ignored, submit a PR if you'd like

Current behavior

Currently, when I use onRemoving method, i can only write window.confirm inside that method. I could not add any other methods inside onRemoving method.

Expected behavior

But, I want to add a angular modal popup inside the onRemoving method to make the consistent behavior among the project. It is ugly when we put window.confirm in the UI view

Minimal reproduction of the problem with instructions (if applicable)

html

Confirm adding and removing tags with Observables

ts

public onRemoving(tag): Observable { this.showDeleteConfirmation(); const confirm = window.confirm('Do you really want to remove this tag?'); return Observable .of(tag) .filter(() => confirm); }

/**

• Shows delete confirmation popup */ showDeleteConfirmation() { let title = this.translate.instant('TAG_ADD.DELETE_CONFIRM'); let message = this.translate.instant('TAG_ADD.FUNCTIONAL_DELETE_CONFIRM_MESSAGE'); const initialState = { token: this.token, attributeId: '', confirmationTitle: title, confirmationMessage: message, callBack: this }; this.bsModalRefFunctionalLocation = this.bsModalService.show(ConfirmationModalComponent, { initialState }); }

What do you use to build your app?. Please specify the version

Angular CLI: 7.3.9 Node: 10.16.0 OS: win32 x64 Package Version

@angular-devkit/architect 0.13.9 @angular-devkit/core 7.3.9 @angular-devkit/schematics 7.3.9 @schematics/angular 7.3.9 @schematics/update 0.13.9 rxjs 6.3.3 typescript 3.2.4

Angular version:

7.3.9

ngx-chips version:

2.0.2

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

all

[vladimir-poma]

I just faced this problem too, I'm not sure if it's a bit late, but I could figured out a way to change window.confirm with angular modal. (not sure if it's just a workaround, but it works)

Component html

<tag-input
     [(ngModel)]="value"
     [modelAsStrings]="true"
     [onRemoving]="onRemoving"></tag-input>


<ng-template  #modalRemoveItemConfirm>
  <div    class="modal-header">
    <h4 class="modal-title pull-left">Confirm Remove</h4>
  </div>
  <div class="modal-body container">
    <span translate>Are you sure you want to remove item?</span>
  </div>
  <div class="modal-footer justify-center">
    <button
      type="button"
      class="btn btn-default"
      (click)="confirmRemoveItem();">Remove</button>
    <button
      type="button"
      class="btn btn-default"
      (click)="bsModalRemoveItemConfirmRef.hide()">Cancel</button>
  </div>
</ng-template>

Component TS

// ... some of your needed imports
import { Component, OnInit, ViewChildren, QueryList, ElementRef, HostListener, ViewChild } from '@angular/core';

import { Observable, Subject, of } from 'rxjs';
import { BsModalRef, BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
@Component({
  // ...
})
export class ComponentName {
  // reference for your modal
     @ViewChild('modalRemoveItemConfirm', {static: false}) modalRemoveItemConfirm: ModalDirective;
  bsModalRemoveItemConfirmRef: BsModalRef;

  constructor(
    private modalService: BsModalService,
    // some other definitions
  ) {
    // ...
    // implicit binding to don't lose references with component context
    this.onRemoving = this.onRemoving.bind(this);
  }

  // your functions

  confirmRemoveItem() {
    // setting dismiss reason to be able to infer in onHide event witch action was selected
    this.modalService.setDismissReason('remove');
    this.bsModalRemoveItemConfirmRef.hide()
  }

  public onRemoving(tag: any): Observable<any> {
    const subject = new Subject<any>();
    const initialState = {
      backdrop: true,
      ignoreBackdropClick: true
    };

    this.bsModalRemoveItemConfirmRef = this.modalService.show(this.modalRemoveItemConfirm, {initialState});

    var subscriptionRef = this.modalService.onHide.subscribe((response_reason) => {
      if (response_reason === 'remove') {
        subject.next(true);
      } else {
        subject.error(false);
      }
      
      subject.complete();

      subscriptionRef.unsubscribe();
    });

    return of(tag).pipe(() => subject.asObservable());
  }
}

And sorry, I just did all this workaround based on

"@angular/core": "~8.2.14", "rxjs": "~6.4.0",

I couldn't test over angular 7, but I hope it helps :)