Open yashothara opened 5 years ago
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 :)
PLEASE MAKE SURE THAT:
I'm submitting a ... (check one with "x")
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);
}
/**
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