Component transclude with inline template
I\'m using Angular 2-rc3 and have a Component and I want to apply transclusion, just in a bit of a different way. Here\'s my component:
import {
-
To spell out the
ngForTemplatemethod:(As of Angular 4 the element is now called
Use a
tag in both the outer and inner components, instead ofThe
is moved to the app.component html, and theon this component has a special 'let-' attribute which references the iterated variable in the inner component:{{item.make | uppercase}}The inner component has
as well and uses a variant of ngFor like so:-
-- insert template here --
The 'tmpl' variable assigned to the ngForTemplate attribute needs to be fetched in the component code:
export class MyListComponent { @Input() data: any[]; @ContentChild(TemplateRef) tmpl: TemplateRef; }@ContentChild and TemplateRef are angular bits, so need to be imported
import { Component, Input, ContentChild, TemplateRef } from '@angular/core';
See the fork of your plunkr with these changes in here plnkr.
This isn't the most satisfactory solution for your stated problem, since you're passing the data in to the list you might as well have the ngFor on the outer. Plus, the additional content (the literal '-- insert template here --') gets dropped, so it you wanted to display that it must be on the outer template as well.
I can see it might be useful where the iteration is provided within the inner component (say from a service call), and maybe to do some manipulation of the template in code.
加载中...
- 热议问题