How can I use same code in template without duplicate

Question

Angular2 component. I want to show same code in modal after click on button. How to use same HTML code in modal after click on button. Without duplication.

html code.
...
...
...
    <div class="modal fade" id="a" tabindex="-1" role="modal" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="">
    <div class="modal-content">
      <div class="modal-header">
      </div>
      <div class="modal-body">
same code here from above
...
...
...

Answer 1

update to angular 5 and use ngTemplateOutletContext

    <template [ngTemplateOutlet]="templateRef">
    <div class="modal fade" id="a" tabindex="-1" role="modal" 
   aria-labelledby="exampleModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-lg" role="">
         <div class="modal-content">
   <div class="modal-header">
   </div>
   <div class="modal-body">
   </template>

u can repeat the above code like below

      <template  #templateRef></template>

refer the link How to repeat a piece of HTML multiple times without ngFor and without another @Component

Answer 2

say that you have two components: - ChildComponent - ParentComponent

@Component({
  selector: 'child-selector',
  template: `...`,
})
export class ChildComponent {

}

then parent

@Component({
  selector: 'parent-selector',
  template: `
    <child-selector>
    </child-selector>
  `,
})
export class ParentComponent {
  public images: Images[] = [ ... ];

  }
}

you can check this link for detailed explaination: https://itnext.io/angular-patterns-2-how-to-write-seriously-reusable-components-96be16568abc