typescript - Angular 4 reutilizando un componente en otro

Hola a todos, estoy usando Angular 4 para mi proyecto actual. Intentaré explicar mi escenario de problema antes de entrar en la pregunta. He creado varios componentes dentro de la carpeta "app" y creado un "Módulo de Funcionalidad" dentro de cada componente. Así que uno de estos componentes se llama "focus".

Ahora tengo un requisito donde necesito mostrar el contenido del componente "focus" dentro de otro componente "iu".

Antes de continuar, también me gustaría agregar que en ambos componentes hay subcomponentes que representan los pasos 1 - 7 según mi requisito.

Ahora, en el paso 3 del componente "iu", al hacer clic en un ícono quiero abrir una ventana modal y mostrar el contenido del componente "focus" (paso 1 - 7).

Esto es lo que he escrito en el paso 3 de "iu" para mostrar las pantallas de "focus":

    <div class="model fade" *ngIf="showAppCaptureData" tabindex="-1" role="dialog" aria-labelledby="viewAppCaptureData" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="viewAppCaptureData">AppCapture Data</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="showAppCaptureData=false">
          <span aria-hidden="true">X</span>
        </button>
      </div>
      <div class="modal-body">
        <app-proposal-form></app-proposal-form>
      </div>
    </div>
  </div>
</div>

En el módulo de Funcionalidades de mi componente «focus» estoy exportando el elemento padre que contiene del paso 1 al 7.

Y en el módulo de características del componente "iu" estoy importando ese elemento y usando el selector correspondiente en el paso 3 del componente "iu" y definiendo las rutas correspondientes.

Puedes ver lo mismo en la imagen que he adjuntado.

este es el código que he escrito para mostrar el contenido del componente de enfoque en el paso 3 del componente iu:

El problema es que cuando hago clic en el icono que cambia showAppCaptureData a verdadero, en lugar de mostrar el contenido en una ventana modal, muestra el contenido en el mismo espacio.

Como se muestra en la imagen de abajo:

Estoy pensando que el problema se debe a en mi archivo iu-form.component.html.

Entiendo que puede no ser fácil comprender todo el escenario solo con esta descripción y un poco de código. Por favor, hágamelo saber si necesito publicar algún otro código que haya escrito para esto.

Por favor, indique cómo puedo superar este problema y mostrar el contenido en una ventana modal.

Gracias.