Modal con angular 5

1. Primero nos vamos a la carpeta ClientApp ejecutando

cd core/clientapp
2. Luego ejecutamos el siguiente comando para instalar la librería que nos permite usar
el modal en angular. Esto se puede encontrar en el siguiente link:

https://valor-software.com/ngx-bootstrap/#/getting-started

npm install ngx-bootrstrap

comentario aparte: al cristian le función si poner el –save en el comando para instalar,
asi que hice lo que me dijo y me funciono.

3 . Una vez instalado nos vamos a la carpeta app.module.ts e importamos la siguiente Liberia

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

(esto se puede copiar)

Y además agregamos esta línea en el array de imports que esta debajo del decorador
@NgModule

ModalModule.forRoot(),
(esto se puede copiar)
5. Ahora como queremos que el modal se despliege en el botón de agregar registro (el botón
que esta al ultimo en la vista indicator-detail.component.html) nos vamos al archivo indicator-
detail.component.ts e importamos estas librerias

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

import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service'
(esto se puede copiar)

También agregamos un atributo

modalRef: BsModalRef; // atribute modal

(esto se puede copiar)

Y también agregamos un parámetro al constructor

private modalService: BsModalService

(esto se puede copiar)
6. En el mismo archivo colocamos unos métodos que nos permita abrir y cerrar el modal

openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template);
}

closeModal(){
this.modalRef.hide();
}
(esto se puede copiar)

7 Ahora colocamos el cuerpo del modal y para hacer esto nos vamos al archivo indicator-
detail.component.html y agregamos esto:
<ng-template #template>
<div class="modal-header">
<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">&times;</span>
</button>
</div>
<div class="modal-body">
<!--<app-addregistry></app-addregistry>-->
Aqui deberia mostrar el modal de agregar formulario
<button type="button" class="btn btn-sucess"
(click)="closeModal()">Cerrar</button>
</div>
</ng-template>
(esto se puede copiar ya que es paja ponerlo a mano)

8. Ahora por ultimo nos vamos al archivo indicator-detail.component.html y al botón de

agregar registro le agregamos lo siguiente en el tag <button>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal"

data-target="#modal-login" (click)="openModal(template)">
Añadir registro
</button>
(esto se puede copiar)

Lo anterior hará que al apretar el botón se dispare el evento click e invocara al método
openModal en el archivo indicator-detail.component.ts

Esto se puede encontrar en el siguiente link:

https://valor-software.com/ngx-bootstrap/#/modals

Yo aplique solamente el que dice service example ya que hay otras formas mas de desplegarlo