Как я могу использовать тот же код в шаблоне без дублирования

скажем, что у вас есть два компонента: - Детский компонент - Родительский компонент

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

}

затем родитель

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

  }
}

вы можете проверить эту ссылку для подробного объяснения: https://itnext.io/angular-patterns-2-how-to-write-seriously-reusable-components-96be16568abc

обновите до angular 5 и используйте 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>

Вы можете повторить приведенный выше код, как показано ниже

      <template  #templateRef></template>

обратитесь по ссылкеКак повторить кусок HTML несколько раз без ngFor и без другого @Component