Valor Software has made a great set of Angular components available for free. And while they’re free, doesn’t the documentation is complete.

In our ‘app.module.ts’ or custom module, we add:

import { ModalModule, BsModalRef } from 'ngx-bootstrap/modal';

@NgModule({
    imports: [
        ...
            ModalModule.forRoot(),
        ...
    ],
    declarations: [
        ...
        YourParentComponent,
        YourModalComponent,
        ...
    ],
    entryComponents: [
        ...
        YourModalComponent
        ...
    ],
    providers: [
        ...
        BsModalRef,
        ...
    ]

If we don’t add our modal component to the ‘entryComponents’ section in our module, we will actually only see the entire window turn gray, also known as the backdrop. It’s also mandatory for the modal component to implement ‘OnInit’.

If we don’t add ‘BsModalRef’ to the ‘providers’ in our module, we will get a ‘StaticInjectorError’ when you try to compile or start your application. And we don’t want that.

Now it should all be straightforward. You can follow the guide here.

Here is our modal’s HTML code:

<div class="modal-header">
    <button type="button" class="close pull-right" aria-label="Close" (click)="close()">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-12">
        ... <!-- Some content -->    
        </div>
    </div>
    <div class="ibox-row-padding">
        <hr class="hr-line"/>
    </div>
    <div class="row">
        <div class="col-sm-6 m-b-xs">
            <button type="button" class="btn btn-primary btn-block" (click)="confirm()">Confirm</button>
        </div>
        <div class="col-sm-6">
            <button class="btn btn-dark btn-block" type="button" (click)="close()">Cancel</button>
        </div>
    </div>
</div>

And the Typescript’s code that goes with it:

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { BsModalRef } from 'ngx-bootstrap/modal';

@Component({
    selector: 'your-modal',
    templateUrl: 'your-modal.html'
})

export class YourModalComponent implements OnInit {
    parameter: number;
    constructor(
        private bsModalRef: BsModalRef,
        private translateService: TranslateService
    ) {
    }

    ngOnInit() {

    }

    confirm() {
        // do stuff
        this.close();
    }

    close() {
        this.bsModalRef.hide();
    }
}

The properties or variables inside our constant ‘initialState’ below have to be fields that exist in your modal’s component. The fields will be automatically assigned and don’t need any additional programming.

import { Component, OnInit } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@Component({
    selector: 'demo-modal-service-component',
    templateUrl: './service-component.html'
})
export class DemoModalServiceFromComponent {
    bsModalRef: BsModalRef;
    constructor(private modalService: BsModalService) {}

    showYourModal() {
        const initialState = {
            parameter: 2019,
        };
        this.bsModalRef = this.modalService.show(YourModalComponent, {initialState});
        this.bsModalRef.content.closeBtnName = 'Close';
    }
}