Way to inject ngx-bootstrap Static Modal in a custom angular 4 component

Question

In this documentation: modals#directive-static

The modal works when we try to use it directly from the web page, but when including it in a component templateUrl, this blocks all the site to show.

When enclosing the HTML in ng-template, the modal stops to work,

Is there any right way to use this static modal in an angular 4 component ?

The content of the ts file is empty, there is no method or way to hide the html until a button is clicked.

import { Component } from '@angular/core';

@Component({
  selector: 'demo-modal-static',
  templateUrl: './static.html'
})
export class DemoModalStaticComponent {}

Answer 1

Finally, I was able to get it to work, just a small issue to completely center it.

Demo:

https://stackblitz.com/edit/ngx-bootstrap-8v1nb5?file=app%2Fapp.component.html

static-modal.component.html:

<button type="button" class="btn btn-primary" (click)="staticModal.show()">Static modal</button>

<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: true}"
         tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title pull-left">Static modal</h4>
            <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            This is static modal, backdrop click will not close it.
            Click <b>&times;</b> to close modal.
          </div>
        </div>
      </div>
    </div>

static-modal.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'static-modal',
  templateUrl: './static-modal.component.html',
  styleUrls: [ './static-modal.component.css' ]
})
export class StaticModal  {
}

static-modal.component.css:

.modal.fade{
  display:flex;
  top:40%;
  justify-content: center;align-items: center;
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { AlertModule } from 'ngx-bootstrap';

import { StaticModal } from './modal-component/static-modal.component';

import { ModalModule } from 'ngx-bootstrap';

@NgModule({
  imports:      [ BrowserModule, FormsModule, AlertModule.forRoot(),
  ModalModule.forRoot() ],
  declarations: [StaticModal, AppComponent, ],

  bootstrap:    [
    AppComponent
  ]
})
export class AppModule { }

Finally, in the parent component:

app.component.html :

<alert type="success">
  <strong>Well done!</strong> You successfully read this important alert message.
</alert>
<static-modal></static-modal>