para reutilizar contenido html en angular 5

Antes de comenzar esta pregunta, aclaro que soy nuevo, así que tenga paciencia. Trataré de explicarme a mí mismo. En bootstrap puedo generar modales de la siguiente manera:

[modal.component.html]

    <!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>-->
    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <p>Some text in the modal.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>

Estoy tratando de crear unaservice para poder invocar el modal anterior donde lo requiera.

Me imagino algo así dentro de miservice archivo

generatePopup(){
  $('#myModal').modal('show');
}

then cada vez que llamas alservice (generatePopup) debería aparecer el modal. No estoy seguro de cómo hacer esto, si me puede guiar estaría muy agradecido. lo que intento hacer es guardar el código y en cualquier componente no tengo que mantener el código html en cada vista, pero llamo ageneratePopup y me invoca al modal.

Gracia

Respuestas a la pregunta(1)

Su respuesta a la pregunta