@codice-progressio/modal

Modal

Modal limpio y sencillo para Angular.

Requiere los estilos de bootstrap 4 o 5 para funcionar y para los iconos utiliza fontawesome

Instalación

npm i @codice-progressio/modal

Uso

Agrega el modal en el modulo más alto que lo necesites.

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, ModalModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Llama al componente desde donde quieras definiendo su id.

<codice-modal [id]="'unId'" (cerrado)="modalCerrado()">
  <h1>Funciona!</h1>
</codice-modal>

Para llamarlo solo inyecta el servicio ModalService en tu componente.

idIdDelModal:string ="esteIdNoSeDebeRepetir"
constructor(private modalService: ModalService ){}

Y ejecuta modalService.open(elIdDelModal).

Para cerrarlo ejecuta modalService.close(idIdDelModal)

Impedir que el usuario cierre el modal

Se puede impedir que el usuario interactue con el modal y lo cierre agregando [permitirCierreManual]="false"

<codice-modal [id]="'unId'" (cerrado)="modalCerrado()  [permitirCierreManual]="false" >
  <h1>Funciona!</h1>
</codice-modal>