Angular ngx-bootstrap model without ng-template

Question

I want to put a modal from bootstrap into my app. For me it is important to style model by myself. With ngx-bootstrap example of ng-template it is not possible to do this. Is there any better soluton instead of this???

<ng-template #template>  
    <div class="modal-header-custom">  
      <h4 class="modal-title pull-left">Modal</h4> 
      <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">  
        <span aria-hidden="true">×</span>  
      </button>  
   </div>
   <div class="modal-body"></div>
</ng-template>

Answer 1

If you want to fundamentally re-style (re-theme) the modal, I'd having a look at applying different CSS styles to the modal-specific classes. Have a look at the SCSS-source to identify which classes you need to target:

https://github.com/twbs/bootstrap/blob/main/scss/_modal.scss

Answer 2

Basically what you can do is generate custom angular modal component as a wrapper with the desired look and style.

Example HTML component:

<div class="custom-modal">
    <div class="custom-modal-body">
        <ng-content></ng-content> <!--used for content projection-->
    </div>
</div>
<div class="custom-modal-background"></div>

After that you generate modal service so it can add and remove modal upon click. For example:

export class ModalService {
    private modals: any[] = [];

    add(modal: any) {
        this.modals.push(modal);
    }

    remove(id: string) {
        this.modals = this.modals.filter(x => x.id !== id);
    }

    open(id: string) {
        const modal = this.modals.find(x => x.id === id);
        modal.open();
    }

    close(id: string) {
        const modal = this.modals.find(x => x.id === id);
        modal.close();
    }
}

Once you are done with the service you can generate some component who will be as a wrapper to the wrapper modal component where content projection will be used. For example:

<custom-modal id="custom-modal-1">
    <h1>A Custom Modal!</h1>
    <p>Home page text: <input type="text" [(ngModel)]="bodyText" /></p>
    <button (click)="closeModal('custom-modal-1');">Close</button>
</custom-modal>

This is the simplest form of creating custom modal form, I suggest you using it with some kind of Angular Material type since modals can be hard to handle after custom implementation.

For full sample please see this stackblitz:

https://stackblitz.com/edit/angular-custom-modal-custom

I hope this will help you, happy coding