Tendré una columna separada que comprende los botones Aprobar y Rechazar. Al hacer clic en el botón aprobar, se espera que aparezca una ventana emergente personalizada que indique '¿Está seguro de que desea aprobar?'. La ventana emergente tendrá dos botones, sí (evento de clic dirigido a una función) y no, devuelve al usuario a la misma página.
Se espera lo mismo para el botón Rechazar.
Código implementado en mecanografiado (Angular 9 y superior).
Por favor avise. ¡TIA!
Lo que debe hacer depende de la biblioteca de componentes de la interfaz de usuario que esté utilizando. Prácticamente todas las bibliotecas de componentes de la interfaz de usuario tienen un componente modal. Así que use el componente modal que ofrece su biblioteca. por ejemplo, material angular modal, ngx bootstrap modal, etc.
Sin embargo, si solo quieres hacer tu propio modal personalizado, es bastante fácil. Por ejemplo.
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; } }t:
showModal = false openModal() { this.showModal = true } closeModal() { this.showModal = false } doSomethingAndCloseModal() { // do something code here this.closeModal() }Es posible que desee mejorar esta solución personalizada agregando una superposición de fondo, haciéndola reutilizable, etc. La reutilización aquí garantiza la separación de preocupaciones. ¡Con un enfoque en la reutilización, el uso de la proyección de contenido es imprescindible!