CODEWITHSUNDEEP
angularjsangularangularjs-ng-include
blankpage985
blankpage985

Reputation: 61

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

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?

Upvotes: -1

Views: 621

Answers (1)

Sunny
Sunny

Reputation: 615

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>;
}

Upvotes: 1

Related Questions