Generic Modal

Modal dinamico Angular 21+

Instalación

npm install @ddiazr/modal-generic

Peer Dependencies

npm i bootstrap @fortawesome/fontawesome-free

Campos

| Propiedad | Tipo | Obligatorio | Descripción | | ------------ | --------- | ----------- | -------------------------------------------------------------------- | | textTitle | string | ❌ No | Campo para darle un titulo al modal | | modalSize | string | ❌ No | Por defecto lg pero le puedes mandar sm,md,xl | | showFooter | boolean | ❌ No | Muestra el footer por si quieres agregar algo en el footer del modal |

Uso básico

import { ModalGeneric } from '@ddiazr/modal-generic';

@Component({
  imports: [ModalGeneric],
  template: `
    @if (showModal()) {
      <mdl-modal-generic
        textTitle="Mi titulo"
        [showFooter]="false"
        modalSize="md"
      >
        <ng-container buttonclose>
          <button type="button" class="btn-close py-0" (click)="showModal.set(false)"></button>
        </ng-container>

        <ng-container body>
          INCRUSTA TU HTML QUE NECESITES
        </ng-container>

        <ng-container footer>
          INCRUSTA TU HTML QUE NECESITES SI ES SHOWFOOTER VA TRUE
        </ng-container>
      </mdl-modal-generic>
    }
  `,
})
export class AppComponent {
  showModal signal<boolean>(false)

}

Configuración de estilos

En tu angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
]

Licencia

MIT

Source files

src/ .ts !.d.ts