I will have a separate column comprising of Approve and Reject Buttons. On clicking the approve button, it is expected that a custom popup is thrown stating ' Are you sure you want to approve'. The popup will have two buttons, yes(click event directed to a function) and no brings the user back to the same page.
Same is expected for the Reject button.
Code implemented in typescript (Angular 9 & above).
Please advise. TIA!
What you should do depends on which UI component library you are using. Virtually all UI component libraries have a modal component. So use the modal component that your library offers. e.g. Angular Material modal, ngx bootstrap modal, etc
However, if you just want to make your own custom modal its pretty easy. For example.
html:
<div>
...
the main content for this component
<button (click)="openModal()">open modal</button>
</div>
<div class="custom-modal-component" [class.hidden]="showModal">
hello I am a modal
<button (click)="closeModal()">close modal</button>
<button (click)="doSomethingAndCloseModal()">do something</button>
</div>
scss:
.custom-modal-component {
position: absolute;
left: 50%;
top: 50%;
width: 500px;
height: 500px;
margin-left: -250px;
margin-top: -250px;
z-index: 100;
&.hidden {
display: none;
}
}
ts:
showModal = false
openModal() {
this.showModal = true
}
closeModal() {
this.showModal = false
}
doSomethingAndCloseModal() {
// do something code here
this.closeModal()
}
You might want to enhance this custom solution by adding a background overlay, making it reusable, etc - reusability here ensures separation of concerns. With focus on reusability, the use of content projection is a must!