Menu
My simplified goal is to build a component which is a list with item template. E.g.:
<list>item</list> Here is my code:
import {bootstrap} from 'angular2/platform/browser'; import {Component} from 'angular2/core'; @Component({ selector: 'list', template: ` <ul> <li *ngFor="let i of items" > <ng-content></ng-content> </li> </ul> ` }) class List { items = [1, 2, 3]; } @Component({ selector: 'app', directives: [List], template: '<list>item</list>' }) class App { } bootstrap(App, []); Expected result:
Actual result:
•
•
• item
898
To get started using template reference variables, simply create a new Angular component or visit an existing one. To create a template reference variable, locate the HTML element that you want to reference and then tag it like so: #myVarName .
To access the above ng-template in the component or directive, first, we need to assign a template reference variable. #sayHelloTemplate is that variable in the code below. Now, we can use the ViewChild query to inject the sayHelloTemplate into our component as an instance of the class TemplateRef .
In order to have a template rendered in that container, we use the *ngTemplateOutlet to pass a reference to an existing template, such as the one we created earlier. We use @Input to pass a TemplateRef to our component.
You can add and remove CSS class names from an element's class attribute with a class binding. Class binding syntax resembles property binding. Instead of an element property between brackets, start with the prefix class , optionally followed by a dot ( . ) and the name of a CSS class: [class.
I found 3 ways to do it
@Component({ selector: 'dynamic-list', template: '<div *ngFor="#item of items" *ngForTemplate="itemTemplate"></div>' }) export class DynamicListComponent { @ContentChild(TemplateRef) public itemTemplate: TemplateRef; @Input() public items: number[]; } <dynamic-list [items]="items"> <div template="#item"> Inline template item #: {{item}} </div> </dynamic-list> output:
Inline template item #: 1 Inline template item #: 2 Inline template item #: 3 Inline template item #: 4 plunker: https://plnkr.co/edit/ollxzUhka77wIXrJGA9t?p=preview
see more https://github.com/ilio/ng2-dynamic-components/blob/master/README.md
42
This is how I did it:
Usage:
<ng-template #myTemplate let-item="item"> <strong>Name: </strong> {{item.name}}<br> <strong>Id: </strong> {{item.id}} </ng-template> <app-template-param [items]="items" [template]="myTemplate"></app-template-param> Component:
@Component({ selector: 'app-template-param', templateUrl: 'template-param.html' }) export class TemplateParamComponent implements OnInit { @Input() items: Array<any>; @Input() template: TemplateRef<any>; } Component HTML
<ng-template #defaultTemplate let-item="item"> <strong>{{item.name}}</strong> </ng-template> <ul> <li *ngFor="let item of items"> <ng-template [ngTemplateOutlet]="template || defaultTemplate" [ngTemplateOutletContext]="{item: item}"></ng-template> </li> </ul> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
