I had a code in which with just putting this piece of code:

```
(click)="crearProcesoAsociado.show()"  //#crearProcesoAsociado id of my modal

```

my modal was called. Before, I had my code in this way and the modal call works well. 

```
<a type="button"  (click)="crearProcesoAsociado.show()" >
  open modal
</a>
<div mdbModal #crearProcesoAsociado="mdbModal" class="modal fade" id="crearProcesoAsociado" tabindex="-1" role="dialog"
  aria-labelledby="crearProcesoAsociado" aria-hidden="true" [config]="{backdrop: true, ignoreBackdropClick: false}">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
    .
    .
    .

```

But for the maintenance of my code I decided to create a component exclusively for my modal with its respective html.
Then from a component that will be the father, I call the modal component:

```
<modal_procesos></modal_procesos>

```

Now with these changes I do not know why it does not work

**HTML Parent**

```
<a type="button"  (click)="crearProcesoAsociado.show()" >
  open modal
</a>
<modal_procesos ></modal_procesos>

```

**Modal template (son)**

```
<div mdbModal #crearProcesoAsociado="mdbModal" class="modal fade" id="crearProcesoAsociado" tabindex="-1" role="dialog"
  aria-labelledby="crearProcesoAsociado" aria-hidden="true" [config]="{backdrop: true, ignoreBackdropClick: false}">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
.
.
.

```

how can I solve it? I am using Angular 6