modal.component.html

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="dialog-sizes-name1"
    [config]="{ show: true }">
    <div class="modal-dialog modal-fit">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="dialog-sizes-name1" class="modal-title pull-left">{{ data['title'] }}</h4>
                <button type="button" class="close pull-right" (click)="closeModal(lgModal)" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center">
                <div [ngSwitch]="type">
                    <div *ngSwitchCase="'thumbnail'">
                        <img [src]="data.srcImage" class="img-fluid">
                    </div>
                    <div *ngSwitchCase="'fancybox'">
                        <app-detail 
                            [datasetName]="data.datasetName"
                            [idAttribute]="data.idAttribute" 
                            [datasetAttributeList]="data.datasetAttributeList">
                        </app-detail>
                    </div>
                    <div *ngSwitchDefault>
                        {{ type }} type not supported
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>