As a beginner in Angular, I am seeking help with my code structure. I have three files: WarningComponent (which displays a warning modal using Bootstrap), modalService (responsible for opening modals), and votingComponent.
Within the votingComponent, there is a button labeled "vote." When this button is clicked, the WarningComponent opens (using the modalService). The WarningComponent contains two buttons: Confirm and Deny.
My objective is to trigger the function postSelectionChoice() in the votingComponent when the user clicks on Confirm.
I attempted to achieve this using Promise and Observable, but encountered issues or possibly implemented them incorrectly...
votingComponent.ts
private showWarning() {
// This method is executed when the user clicks Vote
this.modalService.openModal(ModalType.WARNING,"test");
}
private postSelectionChoice() {
// This should be triggered when the user confirms in the WarningComponent
}
Modal.Service.ts
@Injectable()
export class ModalService {
constructor(private modalService: NgbModal) { }
public openModal(modal: ModalType, message: string) {
let modalRef :NgbModalRef = null;
if(modal == ModalType.ALERT) {
modalRef = this.modalService.open(AlertModalComponent);
} else if (modal == ModalType.WARNING) {
modalRef = this.modalService.open(WarningModalComponent);
} else if (modal == ModalType.SUCCES) {
modalRef = this.modalService.open(SuccesModalComponent);
}
modalRef.componentInstance.message = message;
}
// Attempted implementation for reference...
public getConfirmation(status: Warningstatus) : Promise<Boolean> {
return new Promise((resolve, reject) => {
if(status == Warningstatus.YES) {
console.log("trueeee");
resolve(true);
} else if(status == Warningstatus.NO) {
console.log("falseeee");
resolve(false);
}
});
}
}
WarningComponent.ts
export class WarningModalComponent {
@Input() message;
constructor(public activeModal: NgbActiveModal) {
}
public confirmButton() {
// This method is called when the user clicks the confirm button
}
}