I have a component called "Node" which should display a single post, but I have more than a post type and each type has its own view (layout).
So this component has an ID parameter which will be used to get a post response from a service then according to post type it should display the correct layout.
ex: localhost/test_app/node/123 where 123 is the id parameter.
Approach 1: using ngIf in the tamplate
@Component({
selector: 'node',
directives: [Post, Project],
template: `
<post *ngIf="response.post.post_type == 'post'" content="response.post"></post>
<project *ngIf="response.post.post_type == 'project'" content="response.post"></project>
`,
})
export class Node{
id: number;
response: any;
constructor(private _param: RouteParams,
public service: Service
){
this.id = +_param.get('id');
}
ngOnInit(){
this.service.get(this.id).subscribe(
res=> this.response = res.json()
);
}
}
Approach 2: using dynamic component loader.
@Component({
selector: 'node',
directives: [Post, Project],
template: '<div #container></div>'
})
export class Node{
id: number;
response: any;
constructor(private _param: RouteParams,
public service: Service,
private loader:DynamicComponentLoader,
private elementRef:ElementRef
){
this.id = +_param.get('id');
}
ngOnInit(){
this.service.get(this.id).subscribe(
res=> {
this.response = res.json();
this.renderTemplate();
}
);
}
renderTemplate(template) {
this.loader.loadIntoLocation(
this.getCorrectTemplate(),
this.elementRef,
'container'
)
}
getCorrectTemplate(){
if(this.response.post.post_type == "post"){
return '<post content="response.post"></post>';
}
else{
return '<project content="response.post"></project>';
}
}
}
I'm wondering which approach is more efficient or if there is a better approach, please share it.
