What is the alternative for "ng-include" in angular2?
2 answers
The closest thing to ng-include is the ngTemplateOutlet directive. You need to pass in a TemplateRef and an optional context. Something like that:
@Component({
selector: 'child',
template: `
<div>
here is child template that 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>;
}
- The parent component requests the template and passes it to the child component
- The child component uses the ngTemplateOutlet directive to create the view and render.
0
source to share
//ng-include equivalent in Angular2/4
// How to create directive for ng-clude in Angular2/4
import {
Directive,
ElementRef,
Input,
OnInit
} from '@angular/core';
import {
Headers,
Http,
Response
} from '@angular/http';
@Directive({
selector: 'ngInclude'
})
export class NgIncludeDirective implements OnInit {
@Input('src')
private templateUrl: string;
@Input('type')
private type: string;
constructor(private element: ElementRef, private http: Http) {
}
parseTemplate(res: Response) {
if (this.type == 'template') {
this.element.nativeElement.innerHTML = res.text();
} else if (this.type == 'style') {
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(res.text()));
head.appendChild(style);
}
}
handleTempalteError(err) {
}
ngOnInit() {
this.
http.
get(this.templateUrl).
map(res => this.parseTemplate(res)).
catch(this.handleTempalteError.bind(this)).subscribe(res => {
console.log(res);
});
}
}
enter code here
// html code
<
ngInclude src = "{{src}}"
type = "template" > < /ngInclude>
0
source to share