Best practice for replacing ng-include when upgrading from angularjs to angular?

Question

To my dismay angular no longer supports the ng-include directive. My code base uses hundreds of shared partial html files. I cant seem to find any documentation. Can anyone point meet in the right direction. Is the best practice just to componentize every html file?

Answer 1

You can use ngTemplateOutlet directive as an alternative to ng-include in angular by passing a TemplateRef. Here I mentioned a sample code to do it.

@Component({
  selector: 'child',
  template: `
    <div>
      child template which includes myTemplate
      <ng-container [ngTemplateOutlet]="myTemplate"></ng-container>
    </div>`
})
export class ChildComponent {
  @Input() myTemplate: TemplateRef<any>;
}


@Component({
  selector: 'app-root',
  template: `
    <p>Parent</p>
    <child [myTemplate]="myTemplate"></child>
    <ng-template #myTemplate>hi julia template!</ng-template>
  `
})
export class AppComponent {
  @ViewChild('myTemplate', {read: TemplateRef}) myTemplate: TemplateRef<any>;
}