Angular Modal: How to reuse the same html in modal as well as in the page

Question

In my page whenever user clicks on the image . Whatever be on the page should be now shown in the modal. Currently I have copied the same html two times in my angular code . Is there any way we can reuse the same html for page as well as the modal also in angular.

Answer 1

You could create a component with the template html you want, and use it in both the page and the modal

You could also use ng-template and ng-container

@Component({
  selector: 'app-root',
  template: `      
<ng-template #estimateTemplate let-lessonsCounter="estimate">
    <div> Approximately {{lessonsCounter}} lessons ...</div>
</ng-template>
<ng-container 
   *ngTemplateOutlet="estimateTemplate;context:ctx">
</ng-container>
`})
export class AppComponent {

    totalEstimate = 10;
    ctx = {estimate: this.totalEstimate};
  
}

*example taken from here

Answer 2

I'm not pretty sure what did you looking for, I estimate that you like to reuse your component by dynamic content, then this is what I like to share.

image-modal.component.ts

 @Component({
   selector: 'app-image-modal',
   template: `
     <b>I receive contect: </b> <ng-content></ng-content>
   `
 })
 export class ImageModalComponent {
 
   constructor() {
   }
 
 }

app.component.html

<app-image-modal>
  <span> Hello </span>
</app-image-modal>

<app-image-modal>
  <span> World </span>
</app-image-modal>